CSS isolation Property

Description

The CSS isolation property specifies whether an element must create a new stacking context. A stacking context is a three-dimensional space where elements are positioned and rendered. When an element creates a new stacking context, it becomes isolated from other elements in the document, meaning that it cannot be blended with other elements or affected by their z-index values. The isolation property is most commonly used in conjunction with the background-blend-mode property. background-blend-mode allows you to specify how the background of an element is blended with the backgrounds of other elements behind it. However, background-blend-mode only works within stacking contexts. This means that if you want to blend the background of an element with the backgrounds of other elements, you must first set the isolation property to isolate.

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
Animatable: no
JavaScript syntax: object.style.isolation

Syntax

isolation: auto | isolate

Values

autoA new stacking context is created only if one of the properties applied to the element requires it.
isolateA new stacking context must be created.

Example

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

.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

Editor