position-try-fallbacks
Lists backup positions for an anchored element; the browser uses the first one where the element fits on the screen. Custom positions are described with `@position-try`.
Syntax
position-try-fallbacks: flip-block, --custom;Values
| Parameter | Type | Description |
|---|---|---|
| flip-block, flip-inline | keyword | Mirror the current position: top ↔ bottom or left ↔ right. |
| position-area value | keyword | A ready position, e.g. `top` or `right span-bottom`. |
| --name | @position-try | A named set of properties declared in an `@position-try --name` rule. |
Examples
A tooltip that goes below the button, but jumps above when there is no room underneath (scroll the preview):
<style>
.btn { anchor-name: --tip; margin-top: 120px; }
.tip {
position: absolute;
position-anchor: --tip;
position-area: bottom;
position-try-fallbacks: flip-block;
background: #333; color: white; padding: 4px 8px; border-radius: 4px;
}
</style>
<button class="btn">Hover target</button>
<div class="tip">I flip when there is no room below</div>A named fallback with its own offsets:
<style>
@position-try --to-right {
position-area: right;
margin-left: 8px;
}
.btn { anchor-name: --help; }
.help {
position: absolute;
position-anchor: --help;
position-area: left;
position-try-fallbacks: --to-right;
background: gold; padding: 4px 8px;
}
</style>
<button class="btn">?</button>
<div class="help">Shown on the right: no room on the left</div>Notes
Fallbacks are tried in order, and only when the main position overflows. The shorthand position-try also accepts position-try-order (for example, most-height picks the option with the most room). Inside @position-try only positioning, size and margin properties are allowed. Supported in Chrome and Edge since 2024 and in Safari 26.
See also
- position-area — Places an anchored element in one of nine cells of an imaginary 3 × 3 grid around its anchor.
- anchor-name — Names an element as an anchor, so that an absolutely positioned element anywhere on the page can be placed next to it.
- anchor() — Returns the position of a side of the anchor element; used in `top`, `left`, `right`, `bottom` to attach an element to it.
In the tutorial
- Anchor positioning — CSS anchor positioning — how to attach a tooltip or menu to another element: anchor-name, position-anchor, the anchor() function, position-area, fallback positions with position-try-fallbacks and browser support.