All demos

anchor-name / position-anchor / position-area

Anchor Positioning

Anchor positioning lets you tether one element to another by name, then describe where it should sit relative to that anchor, entirely in CSS. It replaces the getBoundingClientRect() + scroll-listener dance that tooltip and popover libraries have relied on for years.

Telemetry pinned with position-area: top

The 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 element an anchor-name, then point a positioned element at it with position-anchor. The position-area property picks a tile on a 3×3 grid around the anchor (top, bottom right, and so on) without you writing a single top or left value by hand.

position-try-fallbacks is the part that used to require JS: give it a list like flip-block, flip-inline and the browser automatically swaps to whichever fallback actually fits on screen, recalculated on every scroll and resize for free.

Chrome / Edge 125+

MDN docs Can I Use