[ @sdxc/u/layout ]

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.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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":

anchor

top

right

bottom

left

<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:

anchor

top left

top right

bottom left

bottom right

<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:

Signed in as Ada

<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.

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

Responsive design

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

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

Signature

u.positionArea(value: string)