isolation

Controlling whether an element should create a new stacking context.

Overview

Examples

Create a stacking context

Use isolate when a component's blending, z-index, or effects should be contained inside its own stacking context.

<section class="isolate">    <div class="mix-blend-mode:multiply">Blend locally</div></section>

@layer utilities {    .isolate {        isolation: isolate    }}

Return to automatic isolation

Use isolation:auto when a variant should let the browser use normal stacking behavior.

<section class="isolate isolation:auto@sm">    Normal stacking on larger screens</section>

Protect layered components

Isolation is useful for cards, modals, and previews that use blend modes or negative z-index children.

<article class="isolate rel">    <div class="z:-1 abs inset:0"></div></article>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="isolate:hover isolation:auto@sm isolation:auto@print">...</div>