[ @sdxc/u/layout ]
position-try-fallbacks
Applies the CSS Anchor Positioning position-try-fallbacks property, listing named tactics or --custom-position-try references tried in order when the preferred position overflows its containing block.
import { positionTryFallbacks } from "@sdxc/u/layout";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.positionTryFallbacks("flip-block") | css({ positionTryFallbacks: "flip-block" }) |
u.positionTryFallbacks("flip-block", "flip-inline") | css({ positionTryFallbacks: "flip-block, flip-inline" }) |
Examples
Basic example
Use positionTryFallbacks() to list positions to try when the preferred one overflows, like "flip-block" to move a tooltip below an anchor with no room above it:
room above
tooltip
no room above
tooltip
<div mix={[...]}>
<div
mix={[
relative(),
vstack({ align: "center", justify: "end" }),
is(48),
bs(36),
...,
]}
>
<div mix={[anchorName("low"), mb(4), ...]}>room above</div>
<div
mix={[
absolute(),
positionAnchor("low"),
positionArea("top"),
positionTryFallbacks("flip-block"),
m(1),
...,
]}
>
tooltip
</div>
</div>
<div
mix={[
relative(),
vstack({ align: "center", justify: "start" }),
is(48),
bs(36),
...,
]}
>
<div mix={[anchorName("high"), mb(4), ...]}>no room above</div>
<div
mix={[
absolute(),
positionAnchor("high"),
positionArea("top"),
positionTryFallbacks("flip-block"),
m(1),
...,
]}
>
tooltip
</div>
</div>
</div>Trying several fallbacks
Pass several fallbacks to try them in order, combining tactics in one entry like "flip-block flip-inline":
anchor
flipped twice
<div mix={[relative(), vstack({ align: "end" }), is(72), bs(40), ...]}>
<div mix={[anchorName("corner"), m(2), ...]}>anchor</div>
<div
mix={[
absolute(),
positionAnchor("corner"),
positionArea("top right"),
positionTryFallbacks("flip-block", "flip-inline", "flip-block flip-inline"),
...,
]}
>
flipped twice
</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.positionTryFallbacks("flip-block"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.positionTryFallbacks("flip-block"))Signature
u.positionTryFallbacks(...values: string[])