CSS Anchor Positioning Explained

CSS anchor positioning is a set of properties that let you tether one element to the edges of another — a tooltip to its trigger button, a dropdown to its menu handle — without measuring positions in JavaScript. You name an element as an anchor, reference it from a positioned element with the anchor() function, and the browser keeps them aligned as the page scrolls or resizes.

The problem it replaces

Popovers, tooltips, dropdowns, and comboboxes all share the same layout problem: some floating element needs to sit next to a trigger element, tracking its position. Historically, solving this meant JavaScript — libraries like Popper.js exist almost entirely to compute top/left coordinates by reading getBoundingClientRect() on scroll and resize, then writing inline styles back. That’s extra JavaScript, extra reflows, and a layout that only updates as fast as your event listeners fire.

Anchor positioning moves that computation into the browser’s layout engine, the same place position: absolute and CSS Grid already live. The browser knows where the anchor is on every layout pass, so the tethered element stays aligned for free.

The core mechanism

An anchor is any element given a name via the anchor-name property:

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

A separate element then positions itself relative to that anchor by combining position: absolute (or fixed) with the anchor() function inside its position properties:

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  top: anchor(bottom);
  left: anchor(left);
}

anchor(bottom) resolves to the anchor’s bottom edge; anchor(left), anchor(right), anchor(top), and anchor(center) work the same way for their respective edges. The positioned element no longer needs to share a parent with its anchor in the DOM — a longstanding limitation of plain position: absolute, which only positions relative to the nearest positioned ancestor.

Handling overflow with position-try

A tooltip anchored below a button near the bottom of the viewport will overflow off-screen. Anchor positioning addresses this with position-try-fallbacks, which lets you list alternate positions the browser should try if the preferred one would overflow:

.tooltip {
  position-try-fallbacks: flip-block, flip-inline;
}

flip-block flips the element to the opposite side along the block axis (e.g., from below the anchor to above it); flip-inline does the same along the inline axis. The browser evaluates these automatically during layout — no scroll listener recalculating whether the tooltip is about to clip.

How it composes with the rest of the positioning toolkit

Anchor positioning doesn’t replace position: absolute — it extends it. You still need position: absolute or fixed set on the element; position-anchor and anchor() just give you a new coordinate reference other than the containing block. It also composes naturally with the popover mechanism in HTML, since popovers already float outside normal document flow and commonly need to be tethered to a trigger.

It’s worth contrasting with other CSS features that solve adjacent “where does this go” problems. Container queries let an element respond to its container’s size; anchor positioning lets an element respond to another element’s position. Subgrid aligns nested grid items to a parent’s tracks; anchor positioning aligns arbitrary elements that aren’t in a grid relationship at all. And where the CSS box model determines how an element occupies space, anchor positioning determines where that space is placed relative to a completely different element in the tree.

Anchor positioning vs. JavaScript-based positioning

	CSS anchor positioning	JS positioning libraries
Recalculates on scroll/resize	Automatically, as part of layout	Requires event listeners
DOM relationship required	None — anchor and target can be anywhere	None (same advantage)
Overflow handling	Declarative via position-try-fallbacks	Manual collision detection logic
Extra JavaScript bundle	None	A dependency, however small
Runtime cost	Handled by the layout engine	Runs on the main thread per event

Where it fits today

Anchor positioning is a newer CSS capability, so treat it the way you’d treat any progressive enhancement: build the tooltip or dropdown so it degrades acceptably without it, and layer in anchor() and position-try-fallbacks for browsers that support them. It pairs well with feature-detection patterns similar to those used for other modern CSS additions like :has() or cascade layers — ship a reasonable fallback, then enhance.

The takeaway

Anchor positioning gives CSS a native answer to a problem JavaScript libraries have solved for years: keeping one element tethered to another’s edges. anchor-name marks the reference element, anchor() reads its edges from anywhere in the positioning stack, and position-try-fallbacks handles the overflow cases that used to require manual collision detection. For tooltips, popovers, and dropdowns, it’s a meaningful chunk of JavaScript you can simply delete.