W3cubDocs

/CSS

isolation

The isolation CSS property defines if the element must create a new stacking context.

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

/* Global values */
isolation: inherit;
isolation: initial;
isolation: unset;

This especially useful in conjunction with background-blend-mode that only blend background in a given stacking context: it allows to isolate groups of elements from their deeper background and to blend their background color together.

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

Syntax

One of the keyword values listed below.

Values

auto
Is a keyword indicating that a new stacking context has to be created only if one properties applied to the element requires it.
isolate
Is a keyword indicating that 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

Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 41 ? 36 No 30 Yes
Feature Android webview Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
Basic support 41 ? ? 36 No ? 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