CSS Layout
Anchor Positioning
Position tooltips, menus, and callouts relative to an anchor while providing fallback placements for constrained space. The chapter covers anchor association, relative insets, position areas, sizing, fallbacks, and progressive enhancement.
Anchor positioning keeps a floating element tied to its reference without copying viewport coordinates into JavaScript. It expresses association, placement, size, and overflow alternatives as part of the browser's layout calculation.
Tooltips, teaching callouts, and menus often belong to one trigger but must escape ordinary document flow; anchor positioning describes that relationship in the layout system. It can also test alternate positions when the preferred side would place content outside the visible area. This topic also connects with CSS Position and Logical Properties.
Associate an anchored element
Give the reference element an anchor-name, then associate an absolutely or fixed-positioned element with that name through position-anchor.
Example
css
.trigger {
anchor-name: --trigger;
}
.tooltip {
position: absolute;
position-anchor: --trigger;
position-area: block-start center;
}Use anchor-relative lengths
The anchor() function resolves an inset against an edge of the associated anchor. anchor-size() can use the anchor's dimensions when the positioned element needs to match it.
Example
css
.menu {
position: fixed;
position-anchor: --trigger;
inset-block-start: calc(anchor(block-end) + 0.5rem);
inset-inline-start: anchor(inline-start);
min-width: anchor-size(width);
}Plan for constrained space
A preferred position can overflow near a viewport edge. Position-try fallbacks let the browser test alternate placements without measuring coordinates in JavaScript.
Keep anchored content inside the viewport
A preferred anchor position is not enough for a menu or tooltip near an edge. position-try-fallbacks gives the browser an ordered list of alternative placements. The position-try shorthand can combine fallback placement with the order in which alternatives are tested.
Example
css
.tooltip {
position-area: block-end center;
position-try-fallbacks:
flip-block,
flip-inline,
flip-block flip-inline;
}
@position-try --above {
position-area: block-start center;
}
.menu {
position-try-fallbacks: --above, flip-inline;
position-visibility: anchors-visible;
}Use predefined flip tactics for common collision handling and @position-try when a fallback needs custom inset, margin, sizing, or alignment declarations. position-visibility can hide positioned content when its anchor is no longer visible, but hiding must never make required information unreachable.
Anchor Positioning Reference
| Syntax | Purpose | Example |
|---|---|---|
| anchor-name | Names the reference element. | anchor-name: --trigger |
| position-anchor | Associates a positioned element. | position-anchor: --trigger |
| position-area | Places the element in an anchor-relative region. | position-area: block-end |
| anchor() | Returns an anchor-relative inset. | top: anchor(bottom) |
| position-try-fallbacks | Lists alternative placements when the preferred position overflows. | position-try-fallbacks: flip-block |
| @position-try | Defines a named custom fallback placement. | @position-try --above { ... } |
| position-visibility | Conditionally hides unusable anchored content. | position-visibility: anchors-visible |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Anchor Positioning example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
.trigger {
anchor-name: --trigger;
}
.tooltip {
position: absolute;
position-anchor: --trigger;
position-area: block-start center;
}
.menu {
position: fixed;
position-anchor: --trigger;
inset-block-start: calc(anchor(block-end) + 0.5rem);
inset-inline-start: anchor(inline-start);
min-width: anchor-size(width);
}
.tooltip {
position-area: block-end center;
position-try-fallbacks:
flip-block,
flip-inline,
flip-block flip-inline;
}
@position-try --above {
position-area: block-start center;
}
.menu {
position-try-fallbacks: --above, flip-inline;
position-visibility: anchors-visible;
}
</style>
</head>
<body>
<main><button class="trigger">Account</button><aside class="tooltip menu">Account settings</aside></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| anchor-name | 125 | 125 | 147 | 26 |
| position-area | 129 | 129 | 147 | 26 |
| @position-try | 125 | 125 | 147 | 26 |
| position-try-fallbacks | 128 | 128 | 147 | 26 |
| position-visibility | 125 | 125 | 147 | 26.2 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Anchor positioning is progressive enhancement. Keep the anchored content usable when the positioning declarations are unsupported.
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Anchor positioning expresses the relationship between a trigger and positioned content directly in CSS. A production implementation also needs overflow fallbacks, logical placement, keyboard-safe markup, and a usable baseline for browsers without support.
Support is evolving, so test each property in the table, keep the source order meaningful, and ensure the content remains reachable when anchor declarations are ignored.