[ @sdxc/u/layout ]
position
Sets position: absolute.
import { absolute } from "@sdxc/u/layout";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):
absolute()
<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:
top left
top right
bottom left
bottom right
<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:
<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.
u.hover(u.absolute())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.absolute())Signature
u.absolute()