Glossary
Glossary CSS anchor positioning

CSS anchor positioning

Also known as: anchor positioning, anchor-name, position-anchor, anchor(), position-try
TechCSSModern Css

Definition

CSS for placing one element relative to another anywhere in the document — the target names an anchor (position-anchor: --trigger) and positions itself with anchor() values (top: anchor(bottom)), with position-try fallbacks that flip or shift it when it would leave the viewport — so tooltips, popovers and menus need no JavaScript to find their trigger

The last piece of the popover puzzle: the Popover API opens and closes the layer, anchor positioning puts it beside the button and keeps it on screen. Together they replace what Floating UI and Popper do — which is what Reka UI, under Nuxt UI, still uses today, and will until the CSS is Baseline (Chromium shipped it; Safari and Firefox are landing it). A position-try-fallbacks: flip-block is the whole “open upward when there is no room below” logic, in one declaration.

Tech

Positioning was the one layout job CSS could not do because it could not see across the tree. Anchors let it, and a class of JavaScript retires.

Related Terms

  • a: Appearance
  • ?: Keyboard shortcuts