Position popovers with anchor-name, position-anchor, the anchor() function, position-try fallbacks, and the popover top layer
0 / 5 completed
1 / 5
What does CSS anchor positioning let you do?
Anchor positioning: traditionally a popover had to be a descendant of, or share a positioning context with, its trigger. Anchor positioning lets you tether an absolutely positioned element to any anchor element by name, computing its position from the anchor's box — ideal for tooltips, menus, and popovers regardless of DOM structure.
2 / 5
How is an element designated as an anchor?
anchor-name: you set anchor-name: --my-anchor on the reference element. The positioned element associates with it using position-anchor: --my-anchor and then positions itself with the anchor() function. The dashed-ident name links the two elements even when they are far apart in the DOM tree.
3 / 5
What does the anchor() function return?
anchor(): used in inset properties, it resolves to an edge of the anchor box. top: anchor(bottom) aligns the positioned element's top with the anchor's bottom; left: anchor(right) aligns to its right edge. Combined, these place a popover just below and aligned to its trigger using only CSS.
4 / 5
What is the purpose of position-try-fallbacks (position-try options)?
position-try-fallbacks: lets you list fallback positions (often via @position-try rules or built-in flip keywords like flip-block). If the element would overflow in its primary placement, the browser tries each fallback until it fits — replicating, in pure CSS, the auto-flipping behaviour popover libraries implement in JavaScript.
5 / 5
How does anchor positioning pair with the popover attribute and top layer?
Popover + anchor: the HTML popover attribute promotes an element to the top layer (escaping clipping and z-index battles) and provides light-dismiss behaviour. Anchoring it to its trigger via anchor-name/position-anchor yields fully native, accessible tooltips and menus positioned entirely with CSS.