Isolation

isolation: isolate forces an element to create a new stacking context — a self-contained layer where its own z-index values, blend modes, and opacity are resolved independently of everything outside it. It's the cleanest way to contain stacking behavior, without relying on side effects from other properties to get there.

.isolate { isolation: isolate; }
.isolation-auto { isolation: auto; }

Why You'd Need This

Components that layer internal elements — a card with a decorative pseudo-element behind its content, a custom dropdown with its own nested overlays — often assign their own small z-index values to keep those layers ordered correctly. Left alone, those values are compared against every other z-index on the page, including ones from completely unrelated components like the navbar or a modal.

<div class="card">
  <div class="card-decoration" style="z-index: 5;">...</div>
  <div class="card-content" style="z-index: 10;">...</div>
</div>

If a navbar elsewhere on the page uses z-index: 8, part of this card could unexpectedly render above the navbar the instant both elements happen to share a stacking context — even though, from the card's own perspective, 10 was only ever meant to mean "above my own decoration," not "above the entire page."

<div class="card isolate">
  <div class="card-decoration" style="z-index: 5;">...</div>
  <div class="card-content" style="z-index: 10;">...</div>
</div>

Adding .isolate to the card contains both inner z-index values inside that one stacking context. No value inside can ever be compared against, or accidentally rank above, anything outside the card — the card's internal layering stays exactly that: internal.

Relation to Z-index

isolation: isolate and z-index solve related but distinct problems, and it's worth knowing one difference precisely: z-index only has an effect on elements with a position other than static (relative, absolute, fixed, or sticky). isolation: isolate, by contrast, creates a stacking context on its own — no position value required. That makes .isolate useful even on elements you have no other reason to position, purely to contain whatever stacking happens inside them.

For ordering elements within an already-isolated context, reach for the Z-index utilities as usual — isolation contains the context; z-index still does the ordering inside it.

Resetting Isolation

.isolation-auto removes an inherited or previously-applied isolate, returning the element to the default auto behavior (where a stacking context is only created if some other property, like position + z-index or opacity < 1, triggers one). Combined with a breakpoint prefix, this lets isolation be conditional on screen size, following the same mobile-first prefixing used throughout FrontAlign:

<div class="isolate lg:isolation-auto">
  <!-- isolated below `lg`, not isolated at `lg` and up -->
</div>