isolation

Summary

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

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 valueauto
Applies toAll elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
Inheritedno
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

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

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

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 Firefox (Gecko) Internet Explorer Opera Safari
Basic support

41.0

36 (36) No support 30 7.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support

41.0

36.0 (36) No support 36 8.0

See also

Document Tags and Contributors

 Contributors to this page: shvaikalesh, mrstork, teoli, Sebastianz, fscholz, Jeremie, jpmedley
 Last updated by: shvaikalesh,