/* 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

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

A new stacking context must be created.

Formal definition

Formal syntax

auto | isolate

Examples

Forcing a new stacking context for an element

<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> 

.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; } 

Specifications

See also

Last modified: Aug 12, 2021, by MDN contributors