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

auto | isolate

Examples

<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

Specification Status Comment
Compositing and Blending Level 1
The definition of 'Isolation' in that specification.
Candidate Recommendation Initial definition
Initial value auto
Applies to All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
Inherited no
Media visual
Computed value as specified
Animation type discrete
Canonical order the unique non-ambiguous order defined by the formal grammar

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 41 No 36 No 30 Yes
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support 41 ? Yes 36 ? 8 ?

See also

© 2005–2018 Mozilla Developer Network 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