Back to all features
Anchor positioning
Anchor positioning places an element based on the position of another element. For example, you can place a tooltip next to the content it references.
Modern Web Guidance
How Modern Web Guidance uses this feature
Positions floating UI elements like tooltips, popups, and dropdown menus relative to target anchor elements using position-anchor and anchor() without JavaScript coordinate calculations.
Recommended fallback strategy
For browsers lacking native support, load the official @oddbird/css-anchor-positioning polyfill conditionally after feature detection, or provide static border/placement fallbacks via @supports not (position-anchor: auto).
Related use cases
-
Resilient context menus and nested dropdowns UI atoms(opens in new tab)
-
Anchor positioning tab underline UI behaviors(opens in new tab)
-
Show a tooltip when hovering UI behaviors(opens in new tab)
-
Creating persistent app tours UI components(opens in new tab)
Community use cases (1)
Basic CSS Anchor Positioning support was accepted into Interop2025. Looks like it's not going to be ready in Firefox by the end of the year so I'm guessing it will be carried over into 2026:
Accepted Interop proposal: https://github.com/web-platform-tests/interop/issues/752
Carryover evaluation for CSS anchor positioning: https://github.com/web-platform-tests/interop/issues/1172
While we wait oddbird's anchor position polyfill has worked well for side projects:
https://www.npmjs.com/package/@oddbird/css-anchor-positioning