isolation

The isolation property designates whether or not an element should create a new stacking context.

Syntax

Helpful when used with the background-blend-mode or mix-blend-mode properties.

div#ex {
  isolation: isolate;
}

Values

auto
Default value. The stacking context is changed only if one of the properties applied to the element requires it.

isolate
Creates a new stacking context.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of isolation? Submit a codepen.io demo and we'll showcase it here ↴