[ @sdxc/u/stacking ]

z-index

Sets the host element's z-index from a plain number.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.z(10)`	`css({ zIndex: 10 })`

Examples

Basic example

Use z(n) to set a positioned element's stacking order; higher values paint over lower ones:

z(40)

z(30)

z(20)

z(10)

<div mix={[...]}>
	<div
		mix={[
			relative(),
			z(40),
			circle(),
			is(20),
			shadow("md"),
			border({ color: "brand.strong", width: 2 }),
			...,
		]}
	>
		z(40)
	</div>
	<div
		mix={[
			relative(),
			z(30),
			circle(),
			is(20),
			mis(-6),
			shadow("md"),
			border({ color: "brand.strong", width: 2 }),
			...,
		]}
	>
		z(30)
	</div>
	<div
		mix={[
			relative(),
			z(20),
			circle(),
			is(20),
			mis(-6),
			shadow("md"),
			border({ color: "brand.strong", width: 2 }),
			...,
		]}
	>
		z(20)
	</div>
	<div
		mix={[
			relative(),
			z(10),
			circle(),
			is(20),
			mis(-6),
			shadow("md"),
			border({ color: "brand.strong", width: 2 }),
			...,
		]}
	>
		z(10)
	</div>
</div>

Negative values

Pass a negative number, like z(-1), to place an element under its siblings. isolate() on the parent keeps it above the page:

Card content sits above z(-1).

<div mix={[relative(), isolate()]}>
	<div mix={[absolute(), inset(0), z(-1), rotate(-4), rounded("lg"), bg("brand.solid")]} />
	<div mix={[...]}>
		<p mix={[...]}>Card content sits above z(-1).</p>
	</div>
</div>

Using a custom value

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

u.z("2.75rem")

Applying on a state

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

u.hover(u.z(10))

Responsive design

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

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

Signature

u.z(value: number)