Anchor Positioning

Positioning a tooltip, dropdown, or popover next to another element has traditionally meant measuring both elements' positions with JavaScript, calculating coordinates, and re-measuring on scroll and resize — which is exactly what libraries like Popper.js and its successor Floating UI exist to do. CSS anchor positioning brings that same capability natively into the CSS engine: an element can be positioned relative to a named "anchor" element anywhere else in the document, with no JavaScript measuring logic at all.

Naming an anchor

Any element can become an anchor by giving it an anchor-name. The element that should be positioned relative to it then declares that name as its position-anchor.

CSS

.info-button {
  anchor-name: --info-anchor;
}

.tooltip {
  position: fixed; /* anchor positioning requires an absolutely/fixed-positioned box */
  position-anchor: --info-anchor;
}

Positioning with anchor()

The anchor() function resolves to a coordinate derived from the anchor element's box, letting you place the anchored element's edges relative to the anchor's edges — for example, aligning a tooltip's bottom edge to the anchor's top edge to make it appear above the button.

CSS

.tooltip {
  position: fixed;
  position-anchor: --info-anchor;

  /* Place the tooltip's bottom edge at the anchor's top edge
     (i.e. the tooltip sits directly above the button) */
  bottom: anchor(top);

  /* Center the tooltip horizontally over the anchor */
  left: anchor(center);
  translate: -50% 0;
}

HTML

<button class="info-button" popovertarget="tooltip">Info</button>
<div id="tooltip" class="tooltip" popover>
  Extra detail about this field.
</div>

Automatic fallback positioning

A tooltip pinned "always above" its anchor will happily run off the top of the viewport if the anchor is near the top of the page. Anchor positioning has a built-in mechanism for this — trying alternate positions and picking whichever one actually fits — using position-try-fallbacks, so you don't need JavaScript to detect the overflow and flip the tooltip manually.

CSS

.tooltip {
  position: fixed;
  position-anchor: --info-anchor;
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;

  /* If the default placement (above the anchor) would overflow,
     try flipping below the anchor instead */
  position-try-fallbacks: flip-block;
}

flip-block — flips the anchored element to the opposite side along the block axis (e.g. above ↔ below).
flip-inline — flips along the inline axis (e.g. left ↔ right).
A custom list of @position-try fallback rules can also be declared for more specific fallback positions than a simple flip.

Conceptually similar to Popper.js / Floating UI, now native

For years, positioning a floating element relative to a reference element — with collision detection and automatic flipping — was squarely JavaScript library territory. Anchor positioning doesn't aim to replace every feature of those libraries, but it covers the core "position this near that, and don't let it overflow" case using nothing but CSS, which is a genuinely significant capability for the platform.

Note

Anchor positioning is a newer feature and browser support is still catching up across engines — check current support status (MDN or Can I Use, see [Using Can I Use](/css/caniuse)) before depending on it for a production tooltip or popover, and keep a JavaScript positioning fallback (or accept a simpler static position) behind an @supports check in the meantime. It is exactly the kind of capability worth learning now even while support is still spreading — once broadly available, it removes an entire category of positioning JavaScript from most UI codebases.

Scope a set of styles to a subtree without leaking into nested components: [@scope](/css/css-scope).