Visually build CSS anchor positioning — anchor-name, position-anchor, position-area, and anchor() expressions — for tooltips, popovers, and menus that follow an element without JS.
CSS anchor positioning is shipping in Chromium-based browsers (Chrome 125+, Edge 125+) and behind flags or polyfills elsewhere. The preview below uses real CSS — if your browser doesn't support it, the popover will fall back to its default position.
The simple shorthand. Pick a 3×3 cell — the popover snaps to that area relative to the anchor. (Equivalent verbose form shown in the CSS below.)
Drag the orange anchor element around the stage. The blue popover follows using only CSS anchor positioning — no JS positioning code.
anchor-name: declares the anchor target, must start with --. Multiple elements can share an anchor name.
position-anchor: on the positioned element, refers to an anchor-name. Must be combined with position: absolute or fixed.
position-area: shorthand using a 3×3 grid centered on the anchor. Keywords: top, bottom, start, end, center, plus span-* variants for spanning rows/columns.
anchor() function: verbose form, used inside top/left/right/bottom: top: anchor(bottom) aligns the popover's top edge with the anchor's bottom edge.
position-try-fallbacks: if the chosen position would overflow the viewport, the browser tries fallbacks in order. flip-block/flip-inline are common for tooltips that should flip when near an edge.