isolation
Quick Summary for isolation
The isolation CSS property determines whether an element must create a new stacking context.
Code Usage for isolation
/* Keyword values */ isolation: auto; isolation: isolate;  /* Global values */ isolation: inherit; isolation: initial; isolation: revert; isolation: unset; 
More Details for isolation

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 valueauto
Applies toAll elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
Inheritedno
Computed valueas specified
Animation typediscrete

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

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
If you work on something a little bit every day, you end up with something that is massive.
Kenneth Goldsmith
Random CSS Property

shape-outside

The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.
shape-outside css reference