CSS anchor positioning is a layout feature that ties an absolutely positioned element, like a tooltip or dropdown, to another element called its anchor. It is defined in the CSS Anchor Positioning Module Level 1, still a Working Draft in March 2026. MDN lists anchor-name and position-area as Baseline newly available since January 2026, and position-anchor since September 2026.
How it works
Two things are needed: an anchor and a positioned box that refers to it.
- anchor-name: set on the anchor. The value must be a dashed ident that starts with two hyphens, such as --btn. The initial value is none.
- position-anchor: set on the positioned box to choose its default anchor by name. The initial value is normal.
- position-area: places the box in a 3 by 3 grid around the anchor, using keywords such as top, bottom, left, right and center. Add span-all to stretch across a side.
- anchor(): a function for inset properties, such as top: anchor(bottom), when you need exact edges instead of a grid cell.
- anchor-size(): reads the anchor's width or height, for example width: anchor-size(width).
- position-try-fallbacks: lists alternate placements to try when the box would overflow, such as flip-block.
The positioned box must be absolutely or fixed positioned. A popover opened from a button through the popover and popovertarget attributes gets an implicit anchor relationship, so you can skip anchor-name and position-anchor. The anchor box is measured after layout and includes transforms.
#btn { position: absolute; left: 200px; top: 300px; width: 100px; height: 40px; anchor-name: --btn; }
#tip { position: absolute; position-anchor: --btn; position-area: top;
width: 80px; height: 50px; position-try-fallbacks: flip-block; }
Measured in Chromium 153 with getBoundingClientRect (x, y, width, height):
anchor top=300: btn 200 300 100 40 | tip 210 250 80 50
anchor top=20: btn 200 20 100 40 | tip 210 60 80 50
When the anchor sits at top 300 the tip is centered above it, at y 250. When the anchor is 20px from the top there is no room above, so the flip-block fallback moves the tip below it, at y 60.
How do you center a tooltip under its anchor?
Use position-area: bottom, which centers the box horizontally under the anchor. If you want to write the edges yourself, set top: anchor(bottom) and left: anchor(center), then pull the box back by half its own width with translate: -50% 0. With a 100px anchor at left 200 and a box as wide as the anchor, the box landed at x 200, y 340 in the same Chromium run.
Common pitfalls
- Missing the dashes: anchor-name: btn is invalid because the name must be a dashed ident. CSS.supports returned false for btn and true for --btn.
- Forgetting position-anchor: without a default anchor, position-area has nothing to attach to, and anchor() needs an explicit name. Set position-anchor, or use a popover.
- Static or relative positioning: the box must be absolute or fixed, or the properties have no effect.
- No fallback: an anchor near a viewport edge puts the box offscreen. Add position-try-fallbacks so the browser can flip.
- Repeated names in a list: when many items reuse one anchor-name, scope each item with the anchor-scope property, or give each a unique name, so the box finds the right anchor.
- Older browsers: anchor positioning was Baseline only in 2026, so test with a feature query and keep a normal fallback layout.
Related terms
- CSS pseudo-class — often used to show the anchored box, for example on hover or focus
- CSS custom properties — handy for setting a per-component anchor name
- CSS Grid — position-area borrows the idea of a grid around the anchor
- CSS cascade — decides which position-area or fallback list applies
- DOM — the popover attribute links the box and its trigger for you
See also