# isolation

> Creates a new stacking context on the host element while preserving its layout, so a later `z-index` on this element (or a descendant) stays confined here, isolated from unrelated siblings outside it.

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

Creates a new stacking context on the host element while preserving its
layout, so a later `z-index` on this element (or a descendant) stays
confined here, isolated from unrelated siblings outside it.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.isolate()` | `css({ isolation: "isolate" })` |

## Examples

### Basic example

Use `isolate()` to start a new stacking context, so a negative `z()` inside stays above the element's own background:

```tsx
<div mix={[...]}>
	<div mix={[relative(), ...]}>
		<div mix={[absolute(), inset(4), z(-1), blur("lg"), bg("brand.solid")]} />
		<p mix={[...]}>without isolate()</p>
	</div>
	<div mix={[relative(), isolate(), ...]}>
		<div mix={[absolute(), inset(4), z(-1), blur("lg"), bg("brand.solid")]} />
		<p mix={[...]}>isolate()</p>
	</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.isolate())
```

## Responsive design

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

```ts
u.at("md", u.isolate())
```

## Signature

```ts
u.isolate()
```