# zstack

> A grid-overlay stack for layering children on top of each other.

```ts
import { zstack } from "@sdxc/u/layout";
```

A grid-overlay stack for layering children on top of each other. Composes
`u.grid()` and, when given, `u.items()` for `align-items`; `justify-items`
has no dedicated utility, so it's set directly.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.zstack({ align: "center", justify: "center" })` | `css({ display: "grid", alignItems: "center", justifyItems: "center", "& > *": { gridArea: "1 / 1" } })` |

## Examples

### Basic example

Use `zstack()` to stack children on top of each other, with `align` and `justify` placing them inside the shared cell:

```tsx
<div mix={[zstack({ align: "end", justify: "start" })]}>
	<div mix={[is(80), bs(48), ...]} />
	<div mix={[m(3), ...]}>Lake Tahoe</div>
</div>
```

### Centering an overlay

Set both `align` and `justify` to `"center"` to lay an overlay over the middle of the content under it:

```tsx
<div mix={[zstack({ align: "center", justify: "center" })]}>
	<div mix={[is(80), bs(48), ...]} />
	<button type="button" mix={[...]}>
		▶ Play
	</button>
</div>
```

## Applying on a state

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

```ts
u.hover(u.zstack({ align: "center", justify: "center" }))
```

## Responsive design

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

```ts
u.at("md", u.zstack({ align: "center", justify: "center" }))
```

## Signature

```ts
u.zstack(options?: ZStackOptions)
```