[ @sdxc/u/layout ]
position
Sets position: fixed.
import { fixed } from "@sdxc/u/layout";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.fixed() | css({ position: "fixed" }) |
Examples
Basic example
Use fixed() to position an element against the viewport, so it stays put while the page scrolls. Here contain("layout") stands in for the viewport; scroll the text:
Scroll this window and the header stays where it is, while the paragraphs move underneath it.
A fixed element leaves the flow of the page, so nothing makes room for it; the padding at the top of the scroller keeps the first line clear.
In a real page, a fixed header pins to the viewport, staying on screen however far the reader scrolls.
<div mix={[contain("layout"), is(80), bs(56), ...]}>
<header mix={[fixed(), insTop(2), insLeft(2), insRight(2), ...]}>fixed()</header>
<div mix={[overflowY("auto"), bs("full"), pi(4), pbs(16), pbe(4)]}>
<p mix={[...]}>
Scroll this window and the header stays where it is, while the paragraphs move underneath
it.
</p>
<p mix={[...]}>
A fixed element leaves the flow of the page, so nothing makes room for it; the padding at
the top of the scroller keeps the first line clear.
</p>
<p mix={[...]}>
In a real page, a fixed header pins to the viewport, staying on screen however far the
reader scrolls.
</p>
</div>
</div>Pinning to a corner
Combine fixed() with insBottom() and insRight() to keep an element in a corner of the viewport, like a toast:
The toast keeps its corner while the rest of the window scrolls. Scroll this text to see it hold its place.
Fixed elements are measured from the edges of the viewport, so two insets pick the corner.
<div mix={[contain("layout"), is(80), bs(36), ...]}>
<div mix={[overflowY("auto"), bs("full"), pi(4), pbs(4), pbe(16)]}>
<p mix={[...]}>
The toast keeps its corner while the rest of the window scrolls. Scroll this text to see
it hold its place.
</p>
<p mix={[...]}>
Fixed elements are measured from the edges of the viewport, so two insets pick the corner.
</p>
</div>
<div mix={[fixed(), insBottom(3), insRight(3), ...]}>Saved</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.fixed())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.fixed())Signature
u.fixed()