# layer

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

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

Composes isolate and z so a single call gets both a new
stacking context and a stacking order. Accepts only numeric values,
leaving named layers like `"toast"` or `"modal"` to app or component code.

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

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

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

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

## Applying on a state

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

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

## Responsive design

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

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

## Signature

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