Isolation

Utilities for controlling the isolation property of an element.

Class Name	CSS Equivalent
isolate	isolation: isolate;
isolation-auto	isolation: auto;

Isolate

The .isolate class sets the isolation property to isolate. This property creates a new stacking context for the element, isolating it from the rest of the page's stacking order.

<div class="isolate">
  <!-- Isolated content here -->
</div>

Isolation Auto

The .isolation-auto class sets the isolation property to auto. This reverts the element to the default stacking order and does not create a new stacking context.

<div class="isolation-auto">
  <!-- Auto isolation content here -->
</div>

Example

Both elements have a primary class with mix-blend-mode: difference enabled.

Isolated Element

This element has isolation set to isolate. It creates a new stacking context, isolating it from the rest of the page's stacking order. It's displayed on top of other content within the container.

Auto Isolation Element

This element has isolation set to auto. It does not create a new stacking context, allowing it to be part of the default stacking order. It interacts with other content within the container.