CSS anchor positioning lets you place a tooltip, menu, or other positioned element relative to a named element elsewhere in the page—without moving the positioned element next to its target in the HTML. The relationship comes from CSS: give the target an anchor-name, connect the overlay with position-anchor, then choose its placement.
How CSS anchor positioning works
Anchor positioning is a declarative way to size and position a positioned element relative to one or more anchors elsewhere on the page. It builds on the normal CSS positioning model: the element you want to place must have a positioning mode, such as position: absolute.
In this minimal example, the child can be anywhere in the relevant DOM relationship; it does not have to be an adjacent sibling of the anchor.
.parent {
anchor-name: --anchor;
}
.child {
position: absolute;
position-anchor: --anchor;
position-area: center;
width: anchor-size(width);
}anchor-nameassigns a dashed-ident name to the anchor element.position-anchortells the positioned element which named anchor to use.position-areaplaces it in a grid-like area around the anchor.centeraligns it over the anchor.anchor-size(width)reads the anchor’s width, allowing the positioned element to match it.
For example, Geoff Graham’s CSS-Tricks demonstration names the second of ten divs as the anchor and positions the tenth over it using position-anchor, position-area, and anchor-size(). The HTML order and visual placement are separate concerns. See the CSS-Tricks example.
Recommended Free Tools
#1 Best Overall
What “source order does not matter” means—and what it doesn’t
The anchor and the positioned element do not need to sit next to each other in the markup. That can keep document structure organized around content and components rather than forcing an overlay beside its trigger solely to make positioning possible. As Graham puts it, “The fact that it eschews HTML source order is so CSS-y because it’s another separation of concerns between content and presentation.”
It does not mean anchor selection is unconstrained. The browser’s layout and visibility rules still govern which anchors are eligible. An anchor must be fully laid out before the positioned element; an element in a higher layer or an absolutely positioned element that comes after the positioned element may not be eligible. When several visible, already-laid-out elements use the same name, the last eligible one can be selected. web.dev explains anchor selection and layout constraints.
Rank #2
Scope repeated component instances
Repeated cards, menu items, or other components can reuse an anchor name, but an unscoped lookup may connect an overlay to a different instance than intended. Use anchor-scope to limit which anchors are visible for lookup—for example, anchor-scope: all on each component’s wrapper scopes anchor names to that subtree.
MDN notes that, without scoping, a positioned element associated with a name shared by multiple anchors uses the last matching anchor in source order. MDN’s guide to using CSS anchor positioning covers anchor lookup and scope.
Keep a tooltip or popover on screen
A preferred placement can run into the viewport edge as the page scrolls or the anchor moves. Anchor positioning provides fallback mechanisms so CSS can try alternate placements rather than requiring JavaScript to measure and reposition the overlay on each change. The browser evaluates configured fallback options in order; position-try-order can choose an option with more available space along an axis.
MDN documents fallback positions and hiding behavior, while web.dev describes trying alternatives when a preferred placement overflows. The useful design choice is whether the component should flip to another visible position or be hidden if no acceptable placement exists. MDN’s anchor-positioning guide and web.dev’s guide explain these options.
Choose a placement model
- Use
position-areafor grid-like placement around the anchor, such as above, below, or centered. - Use
anchor()in inset properties when you need to refer to particular anchor edges directly. - Use fallback positions when the preferred side might overflow, and decide whether the component should move or disappear if no safe placement is available.
These CSS options reduce the need for custom JavaScript that repeatedly measures an anchor and updates an overlay’s coordinates. They do not remove the need to choose suitable fallback behavior for the component.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Check browser support before relying on it
Support is not uniform across browsers, and some browser versions have only partial support. The compatibility matrix changes over time, so check the current property-level status for the browsers and versions your audience uses rather than assuming that “anchor positioning” works everywhere. Can I Use’s CSS anchor positioning table tracks supported, partial, disabled, and unsupported ranges.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
For a site that must work where the needed properties are unavailable, provide a fallback or treat anchor positioning as progressive enhancement. The compatibility table is not a stable adoption statistic; it reports browser support status, not how many people use the feature.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
