# position

> Sets `position: absolute`.

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

Sets `position: absolute`.

## Quick reference

Every documented call, beside the CSS it emits.

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

## Examples

### Basic example

Use `absolute()` to position an element against its nearest positioned ancestor, then place it with inset utilities like `insTop(0)` and `insRight(0)`:

```tsx
<div mix={[relative(), is(72), bs(32), ...]}>
	<div mix={[absolute(), insTop(0), insRight(0), ...]}>absolute()</div>
</div>
```

### Pinning to each corner

Combine `absolute()` with a vertical and a horizontal inset to pin an element to any corner of its parent:

```tsx
<div mix={[relative(), is(96), bs(40), ...]}>
	<div mix={[absolute(), insTop(0), insLeft(0), ...]}>top left</div>
	<div mix={[absolute(), insTop(0), insRight(0), ...]}>top right</div>
	<div mix={[absolute(), insBottom(0), insLeft(0), ...]}>bottom left</div>
	<div mix={[absolute(), insBottom(0), insRight(0), ...]}>bottom right</div>
</div>
```

### Overlaying an image

Absolutely positioned elements take no room in the flow, so they can sit on top of media like this caption over a photo:

```tsx
<figure mix={[relative(), is(96), bs(56), m(0), ...]}>
	<figcaption
		mix={[absolute(), insBottom(3), insLeft(3), p(1, 3), rounded("md"), bg(), fg(), text("sm")]}
	>
		Moraine Lake, Alberta
	</figcaption>
</figure>
```

## Applying on a state

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

```ts
u.hover(u.absolute())
```

## Responsive design

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

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

## Signature

```ts
u.absolute()
```