CSS Anchor Positioning Just Deleted a Dependency From Our Projects

Anchor positioning has reached Baseline across Chrome, Firefox and Safari this year, and it quietly removes the reason most teams reached for Floating UI or Popper.js.

The problem those libraries solved was always the same: tether a tooltip, dropdown or popover to another element, then keep it positioned correctly as the page scrolls, resizes or runs out of room. Doing that in plain CSS used to mean either accepting a rough approximation or pulling in a JavaScript library to do the maths.

Anchor positioning does it natively. You name an anchor with anchor-name, tether another element to it with position-anchor, and let the browser handle the geometry, including flipping the element to the other side when it would otherwise run off screen. No observer pattern, no resize listener, no extra kilobytes in the bundle.

It will not replace every use of those libraries immediately. Complex collision handling and virtualised lists still benefit from a library's edge cases. But for the plain tooltip, the simple dropdown, the basic popover, which is most of what teams actually build, this is one less dependency to install, version and eventually patch for a security advisory nobody wanted to triage.

If you are shipping a design system, this is worth an afternoon now rather than a migration later.