CSS anchor positioning

In one line: CSS anchor positioning lets a floating element — a tooltip, popover, or menu — declare another element as its anchor and place itself around it, so the browser does the coordinate math the page used to outsource to JavaScript.

What it is

Anchor positioning ties one positioned element to another, the anchor, and lets you place the first relative to the second's box — even when they are not parent and child in the DOM. You name an element with anchor-name, point a floating element at it with position-anchor, and then describe where it should sit with position-area or the anchor() function.

This is the native replacement for the wad of JavaScript that tooltip and dropdown libraries ship to measure an anchor, read scroll offsets, and recompute top/left on every resize. The browser already knows where both boxes are; anchor positioning just asks it to do the placement directly.

Why it matters

Less JavaScript in the hot path. The position is resolved by the layout engine, so there is no getBoundingClientRect loop firing on scroll and resize, and no reflow jank from a script racing the paint.

It also pairs cleanly with the rest of the modern overlay stack: the popover API gives you show/hide, light-dismiss, and Esc handling, and the top layer renders the overlay above everything without z-index wars or overflow: hidden clipping. Anchor positioning supplies the one piece those two were missing — where the overlay goes.

See it

Change the placement and watch the popover move around its anchor — top, bottom, left, or right — while the generated CSS rule below the stage updates to match.

How it works

Four pieces do the work:

• anchor-name — declared on the anchor element, e.g. anchor-name: --trigger;. This is the handle other elements refer to.
• position-anchor — set on the floating element to bind it to that name: position-anchor: --trigger;.
• position-area — a high-level grid that places the floating element in one of nine regions around the anchor (top, bottom, top left, center, …). It is the easiest way to say "below and centered."
• The anchor() function — the low-level escape hatch. Used inside top/left/etc., anchor(--trigger bottom) resolves to the anchor's bottom edge, so you can compose exact offsets when position-area is too coarse.

Add position-try-fallbacks to keep the overlay on-screen: list alternative placements (or use a flip keyword like flip-block) and the browser tries them in order when the preferred one would overflow the viewport — the edge-flipping that tooltip libraries hand-rolled, now declarative.

Because the floating element is an overlay, pair it with the popover attribute and the top layer so it escapes clipping and gets keyboard/dismiss behavior for free.

Build it

A tooltip tethered to a button: the button carries the anchor-name, the tooltip binds to it and sits below with position-area, and position-try-fallbacks flips it above when it would run off the bottom of the viewport.

<button id="save" popovertarget="tip" style="anchor-name: --save">Save</button>
<div id="tip" popover>Saves to your library</div>

#tip {
  /* Tether this overlay to the button declared as --save. */
  position-anchor: --save;
 
  /* Place it below the anchor, horizontally centered. */
  position-area: bottom;
  margin-top: 0.5rem;
 
  /* If "below" would overflow the viewport, try above instead. */
  position-try-fallbacks: flip-block;
}
 
/* Progressive enhancement: a usable position before anchoring applies. */
@supports not (anchor-name: --x) {
  #tip {
    position: absolute;
    inset: auto auto 0 0;
  }
}
 
@media (prefers-reduced-motion: no-preference) {
  #tip {
    transition: opacity 150ms ease;
  }
}

Make it yours

• Cycle through all four placements and read the position-area line below the stage — each control maps to exactly one CSS value.
• Imagine the anchor near a viewport edge: that is where position-try-fallbacks earns its keep, flipping bottom to top so the overlay stays visible.
• Picture the same overlay with the popover attribute added — anchor positioning handles where, the popover API handles when and dismiss.

Reproduce it with an LLM

Pitfalls & accessibility

• A purely decorative tooltip can be aria-hidden, but anything conveying real information needs a role and an accessible name — never let placement alone carry meaning.

Further reading

• MDN — CSS anchor positioning
• MDN — Using CSS anchor positioning
• Chrome for Developers — Tether elements with CSS anchor positioning
• MDN — position-try-fallbacks