isolation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

Try it

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

Syntax

css
/* Keyword values */
isolation: auto;
isolation: isolate;

/* Global values */
isolation: inherit;
isolation: initial;
isolation: revert;
isolation: revert-layer;
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 typeNot animatable

Formal syntax

isolation = 
<isolation-mode>

<isolation-mode> =
auto |
isolate

Examples

Forcing a new stacking context for an element

HTML

html
<div class="big-square ">
  <div class="isolation-auto">
    <div class="small-square">auto</div>
  </div>
  <div class="isolation-isolate">
    <div class="small-square">isolate</div>
  </div>
</div>

CSS

css
.isolation-auto {
  isolation: auto;
}

.isolation-isolate {
  isolation: isolate;
}

.big-square {
  background-color: rgb(0 255 0);
  width: 200px;
  height: 210px;
}

.small-square {
  background-color: rgb(0 255 0);
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}

Result

Specifications

Specification
Compositing and Blending Level 2
# isolation

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
isolation

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also