# z-index

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

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

Sets the host element's `z-index` from a plain number. Named component
layers such as `"toast"` or `"modal"` are an app or component concern,
so this primitive stays scoped to raw numeric values.

## 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:

```tsx
<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:

```tsx
<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.

```ts
u.z("2.75rem")
```

## Applying on a state

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

```ts
u.hover(u.z(10))
```

## Responsive design

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

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

## Signature

```ts
u.z(value: number)
```