anchor-name / position-anchor / position-area
Anchor Positioning
Link one element to another by name, then say where it should sit. It replaces the getBoundingClientRect() + scroll-listener complexity that tooltip and popover libraries have relied on for years.
position-area: topThe console sits in the bottom-right corner of a boxed, clipped stage on purpose. Pick bottom or bottom right with the fallback off and the readout gets cut off by the edge. Turn position-try-fallbacks back on and the browser flips it to whichever side actually has room, no JS required.
The CSS
.anchor-button {
anchor-name: --demo-anchor;
}
.popover {
position: absolute;
position-anchor: --demo-anchor;
position-area: top;
position-try-fallbacks: flip-block, flip-inline;
}How it works
Give the anchor an anchor-name and point a positioned element at it with position-anchor. Then position-area picks a tile on a 3×3 grid around it (top, bottom right, and so on), so you never write a top or left value yourself.
position-try-fallbacks is the part that used to need JS. Hand it a list like flip-block, flip-inline and the browser swaps to whichever one fits, rechecked on every scroll and resize.
turns, wins and reset, all CSS
trigonometry, in CSS
switch guests on