[ @sdxc/u/stacking ]

layer

Composes isolate and z so a single call gets both a new stacking context and a stacking order.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.layer(10)`	`css({ isolation: "isolate", zIndex: 10 })`

Examples

Basic example

Use layer(n) to start a stacking context and set its order in one call. A z() inside never climbs out of its layer:

z(999)

layer(1)

layer(2) still covers the badge

<div mix={[relative(), is(72)]}>
	<div mix={[relative(), layer(1), ...]}>
		<span
			mix={[
				absolute(),
				insBottom(-3),
				insIe(4),
				z(999),
				p(1, 2),
				rounded("full"),
				text("xs"),
				bg("danger.solid"),
				fg("danger.onSolid"),
			]}
		>
			z(999)
		</span>
		<p mix={[...]}>layer(1)</p>
	</div>
	<div mix={[relative(), layer(2), is(48), mbs(-6), mis(12), ...]}>
		<p mix={[...]}>layer(2) still covers the badge</p>
	</div>
</div>

Ordering page regions

Give each region its own layer() so its order is one number, like a sticky header over raised cards. Scroll the box:

layer(10)

layer(1)

<div mix={[maxBs(48), overflow({ y: "auto" }), ...]}>
	<header
		mix={[
			sticky(),
			insTop(0),
			layer(10),
			p(3),
			bg(),
			borderEdge("block-end", { color: "neutral.border", width: 1 }),
			...,
		]}
	>
		layer(10)
	</header>
	<div mix={[p(3), ...]}>
		<div mix={[layer(1), ...]}>layer(1)</div>
		<div mix={[layer(1), ...]}>layer(1)</div>
		<div mix={[layer(1), ...]}>layer(1)</div>
	</div>
</div>

Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

u.layer("2.75rem")

Applying on a state

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

u.hover(u.layer(10))

Responsive design

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

u.at("md", u.layer(10))

Signature

u.layer(value: number)