[ @sdxc/u/stacking ]

isolation

Creates a new stacking context on the host element while preserving its layout, so a later z-index on this element (or a descendant) stays confined here, isolated from unrelated siblings outside it.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { isolate } from "@sdxc/u/stacking";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.isolate()`	`css({ isolation: "isolate" })`

Examples

Basic example

Use isolate() to start a new stacking context, so a negative z() inside stays above the element's own background:

without isolate()

isolate()

<div mix={[...]}>
	<div mix={[relative(), ...]}>
		<div mix={[absolute(), inset(4), z(-1), blur("lg"), bg("brand.solid")]} />
		<p mix={[...]}>without isolate()</p>
	</div>
	<div mix={[relative(), isolate(), ...]}>
		<div mix={[absolute(), inset(4), z(-1), blur("lg"), bg("brand.solid")]} />
		<p mix={[...]}>isolate()</p>
	</div>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.isolate())

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.isolate())

Signature

u.isolate()