W3cubDocs

/CSS

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.

Syntax

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

/* Global values */
isolation: inherit;
isolation: initial;
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 Status Comment
Compositing and Blending Level 1
The definition of 'Isolation' in that specification.
Candidate Recommendation Initial definition

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
isolation 41 79 36 No 30 8
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
isolation 41 41 36 30 8 4.0

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/isolation