[ @sdxc/u/layout ]

position

Sets position: relative.

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.relative()`	`css({ position: "relative" })`

Use relative() to position an element in the normal flow, so its absolutely positioned children are offset from it:

Relative parent

absolute()

<div mix={[relative(), is(72), bs(36), ...]}>
	<p>Relative parent</p>
	<div mix={[absolute(), insBs(3), insIe(3), ...]}>absolute()</div>
</div>

Add offsets like insBs(4) and insIs(6) to shift a relative element from its place, while the space it came from stays reserved:

relative()

<div mix={[...]}>
	<div mix={[relative(), insBs(4), insIs(6), ...]}>relative()</div>
</div>

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

u.hover(u.relative())

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

u.at("md", u.relative())

u.relative()