Guide to the CSS Anchor Positioning API

The CSS Anchor Positioning API is a native web feature that allows developers to tether floating elements—such as tooltips, dropdown menus, context menus, and popovers—directly to other elements on a page known as anchors. Historically, anchoring elements required complex JavaScript calculations, third-party libraries, and event listeners to keep floating content aligned during page scrolling or layout shifts. The CSS Anchor Positioning API moves this logic entirely into native CSS, offering high-performance, declarative positioning that automatically responds to layout changes and viewport constraints.

How Anchor Positioning Works

At its core, anchor positioning requires two main components: an anchor element and a target element (the floating element).

To connect them, you first designate an anchor element using the anchor-name property, which accepts a dashed-ident identifier:

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

Next, you tether the floating element to that designated anchor using position: fixed or position: absolute, combined with the position-anchor property:

.tooltip {
  position: absolute;
  position-anchor: --tooltip-anchor;
}

Positioning Floating Elements

Once tethered, the floating element can be positioned relative to the anchor's edges using the anchor() function inside standard inset properties (top, bottom, left, right):

.tooltip {
  position: absolute;
  position-anchor: --tooltip-anchor;
  top: anchor(bottom);
  left: anchor(center);
  transform: translateX(-50%);
}

In this example, the top edge of the tooltip is pinned directly to the bottom edge of the anchor, and its horizontal start aligns with the anchor's center point. The anchor() function accepts edge keywords such as top, bottom, left, right, start, end, center, or percentage values.

Simplified Placement with position-area

To streamline common alignments without requiring manual inset and transform declarations, the API introduces the position-area property. It divides the space around an anchor into a 3x3 grid:

.tooltip {
  position: absolute;
  position-anchor: --tooltip-anchor;
  position-area: top center;
}

This single declaration places the floating element above the anchor and centers it horizontally, replacing the need for individual top, left, and transform rules.

Handling Viewport Collisions

A major challenge with floating interfaces is preventing content from rendering offscreen. The Anchor Positioning API solves this natively through the @position-try rule and the position-try-fallbacks property.

Developers can define alternate placement strategies that activate automatically if the default position causes the floating element to overflow the viewport:

@position-try --flip-to-bottom {
  top: anchor(bottom);
  bottom: auto;
}

.tooltip {
  position: absolute;
  position-anchor: --tooltip-anchor;
  bottom: anchor(top);
  position-try-fallbacks: --flip-to-bottom;
}

Browser vendors also support built-in keyword fallbacks such as flip-block and flip-inline, allowing elements to mirror their placement across axes when space runs out without requiring custom @position-try definitions.

Implicit Anchoring with HTML

In addition to pure CSS pairing, the API integrates with HTML attributes. When using native elements like the HTML Popover API, an element can be implicitly associated with an anchor via the anchor attribute in markup:

<button id="menu-btn">Options</button>
<div popover anchor="menu-btn" class="menu">Menu Items</div>

When an implicit anchor is established via HTML, the floating element automatically knows its reference anchor, removing the need to declare position-anchor in the stylesheet.