CSS isolation attribute

Definition and Usage

The isolation property defines whether a new stacking context must be created for the element.

Tip:The isolation property is very useful when used with background-blend-mode or mix-blend-mode.

See also:

HTML DOM Reference Manual:isolation Property

Example

Create a new stacking context for the element with id="e":

#e {
  isolation: isolate;
}

Try It Yourself

CSS Syntax

isolation: auto|isolate|initial|inherit;

Property Value

Value Description
auto Default. A new stacking context is only created when one of the properties applied to the element requires it.
isolate A new stacking context must be created.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: auto
Inheritance: No
Animation Creation: Not supported. See:Animation-related Properties.
Version: CSS3
JavaScript Syntax: object.style.isolation="isolate"

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
41.0 79.0 36.0 Yes 30.0