# position-area

> Applies the CSS Anchor Positioning `position-area` property, placing an anchor-positioned element in a named region of the 3x3 grid around its anchor.

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

Applies the CSS Anchor Positioning `position-area` property, placing an
anchor-positioned element in a named region of the 3x3 grid around its
anchor. Accepts the whole logical-position-keyword grammar as a string.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.positionArea("top left")` | `css({ positionArea: "top left" })` |
| `u.positionArea("bottom span-right")` | `css({ positionArea: "bottom span-right" })` |

## Examples

### Basic example

Use `positionArea(side)` to place an anchor-positioned element on one side of its anchor, like `"top"` or `"right"`:

```tsx
<div mix={[m(18, 32)]}>
	<div mix={[anchorName("sides"), ...]}>anchor</div>
	<div mix={[absolute(), positionAnchor("sides"), positionArea("top"), m(2), ...]}>
		top
	</div>
	<div mix={[absolute(), positionAnchor("sides"), positionArea("right"), m(2), ...]}>
		right
	</div>
	<div mix={[absolute(), positionAnchor("sides"), positionArea("bottom"), m(2), ...]}>
		bottom
	</div>
	<div mix={[absolute(), positionAnchor("sides"), positionArea("left"), m(2), ...]}>
		left
	</div>
</div>
```

### Placing in a corner

Pass a keyword for each axis, like `"top left"`, to place the element in a corner cell around its anchor:

```tsx
<div mix={[m(20, 40)]}>
	<div mix={[anchorName("corners"), ...]}>anchor</div>
	<div mix={[absolute(), positionAnchor("corners"), positionArea("top left"), ...]}>
		top left
	</div>
	<div mix={[absolute(), positionAnchor("corners"), positionArea("top right"), ...]}>
		top right
	</div>
	<div mix={[absolute(), positionAnchor("corners"), positionArea("bottom left"), ...]}>
		bottom left
	</div>
	<div
		mix={[absolute(), positionAnchor("corners"), positionArea("bottom right"), ...]}
	>
		bottom right
	</div>
</div>
```

### Spanning cells

Use a `span-*` keyword, like `"bottom span-right"`, to cover the anchor's cell and the one beside it, so a menu lines up with its button's edge:

```tsx
<div mix={[is(72), bs(32)]}>
	<button type="button" mix={[anchorName("account"), ...]}>
		Account
	</button>
	<div
		mix={[
			absolute(),
			positionAnchor("account"),
			positionArea("bottom span-right"),
			mbs(2),
			is(48),
			...,
		]}
	>
		Signed in as Ada
	</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.positionArea("top left"))
```

## Responsive design

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

```ts
u.at("md", u.positionArea("top left"))
```

## Signature

```ts
u.positionArea(value: string)
```