isolation
Create a local stacking context for layered and blended content.
Overview
| Class | Declarations |
|---|---|
isolation:auto | isolation: auto;
|
isolate | isolation: isolate;
|
isolation:<value> | isolation: <value>;
|
Examples
Create a stacking context
isolate creates a stacking context. In this comparison, the blue background belongs to the outer parent. Isolation keeps the inner purple layer from blending with that external background.
<div class="p-md bg-blue-20"> <section class="isolate"> <div class="p-lg bg-violet-50 mix-blend-mode:multiply">Blend layer</div> </section></div>Generated CSS
@layer utilities { .isolate { isolation: isolate }}Return to automatic isolation
isolation:auto stops explicitly creating a stacking context. Widen the preview to sm to let the purple layer blend with the blue background. Other properties, such as a transform or non-default opacity, can still create a stacking context.
<div class="p-md bg-blue-20"> <section class="isolate isolation:auto@sm"> <div class="p-lg bg-violet-50 mix-blend-mode:multiply">Blend layer</div> </section></div>Protect layered components
Use isolation to keep negative z-index decoration inside its component. The blue background layer stays behind the paragraph and above the card’s own surface.
<article class="rel isolate h:10rem p-md"> <div class="abs inset:0 z:-1" aria-hidden="true"></div> <p>Foreground content</p></article>Apply conditionally
Use selectors and conditional queries to change the behavior when a state or viewport condition applies. Focus the inner section with Tab to isolate its blending. At sm, the section is isolated without focus.
<div class="p-md bg-blue-20"> <section tabindex="0" class="isolation:auto isolate:focus-visible isolate@sm"> <div class="p-lg bg-violet-50 mix-blend-mode:multiply">Focus with Tab</div> </section></div>