# position

> Sets `position: fixed`.

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

Sets `position: fixed`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.fixed()` | `css({ position: "fixed" })` |

## Examples

### Basic example

Use `fixed()` to position an element against the viewport, so it stays put while the page scrolls. Here `contain("layout")` stands in for the viewport; scroll the text:

```tsx
<div mix={[contain("layout"), is(80), bs(56), ...]}>
	<header mix={[fixed(), insTop(2), insLeft(2), insRight(2), ...]}>fixed()</header>
	<div mix={[overflowY("auto"), bs("full"), pi(4), pbs(16), pbe(4)]}>
		<p mix={[...]}>
			Scroll this window and the header stays where it is, while the paragraphs move underneath
			it.
		</p>
		<p mix={[...]}>
			A fixed element leaves the flow of the page, so nothing makes room for it; the padding at
			the top of the scroller keeps the first line clear.
		</p>
		<p mix={[...]}>
			In a real page, a fixed header pins to the viewport, staying on screen however far the
			reader scrolls.
		</p>
	</div>
</div>
```

### Pinning to a corner

Combine `fixed()` with `insBottom()` and `insRight()` to keep an element in a corner of the viewport, like a toast:

```tsx
<div mix={[contain("layout"), is(80), bs(36), ...]}>
	<div mix={[overflowY("auto"), bs("full"), pi(4), pbs(4), pbe(16)]}>
		<p mix={[...]}>
			The toast keeps its corner while the rest of the window scrolls. Scroll this text to see
			it hold its place.
		</p>
		<p mix={[...]}>
			Fixed elements are measured from the edges of the viewport, so two insets pick the corner.
		</p>
	</div>
	<div mix={[fixed(), insBottom(3), insRight(3), ...]}>Saved</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.fixed())
```

## Responsive design

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

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

## Signature

```ts
u.fixed()
```