Anchor Positioning

ELI5 — The Vibe Check

CSS Anchor Positioning lets you position an element relative to another element anywhere on the page — without JavaScript. Tooltips, popovers, dropdown menus — all the things that used to require Popper.js or Floating UI can now be done in pure CSS. You say 'put this tooltip above that button' and the browser handles the math, including flipping it when there's not enough space.

Real Talk

CSS Anchor Positioning (anchor()) is a new CSS specification that enables positioning elements relative to other elements (anchors) declaratively. It eliminates the need for JavaScript positioning libraries by providing native browser support for tooltips, popovers, and floating UI elements. It includes automatic fallback positioning via position-try to handle viewport edge cases. Progressive browser support as of 2025-2026.

Show Me The Code

.trigger {
  anchor-name: --my-anchor;
}

.tooltip {
  position: fixed;
  position-anchor: --my-anchor;
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;
  position-try: flip-block;
}

When You'll Hear This

"Use CSS anchor positioning instead of Floating UI — it's native now." / "Anchor positioning handles viewport flipping automatically."