The isolation CSS property determines whether an element must create a new stacking context.

/* Keyword values */ isolation: auto; isolation: isolate;  /* Global values */ isolation: inherit; isolation: initial; isolation: revert; isolation: unset; 

isolation

The isolation CSS property determines whether an element must create a new stacking context.

This property is especially helpful when used in conjunction with mix-blend-mode and z-index.

Syntax

/* Keyword values */ isolation: auto; isolation: isolate;  /* Global values */ isolation: inherit; isolation: initial; isolation: revert; isolation: unset; 

The isolation property is specified as one of the keyword values listed below.

Values

auto

A new stacking context is created only if one of the properties applied to the element requires it.

isolate

A new stacking context must be created.

Formal definition

Initial value	auto
Applies to	All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

auto | isolate

Examples

Forcing a new stacking context for an element

HTML

<div id="b" class="a">   <div id="d">     <div class="a c">auto</div>   </div>   <div id="e">     <div class="a c">isolate</div>   </div> </div> 

CSS

.a {   background-color: rgb(0,255,0); } #b {   width: 200px;   height: 210px; } .c {   width: 100px;   height: 100px;   border: 1px solid black;   padding: 2px;   mix-blend-mode: difference; } #d {   isolation: auto; } #e {   isolation: isolate; } 

Result

Specifications

Specification
Compositing and Blending Level 2 # isolation

See also

<blend-mode> mix-blend-mode, background-blend-mode

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)EspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体) Change language