CSS Anchor Positioning: Beyond the Containing Block

Why it exists

For years, positioning a non-child element (like a tooltip) next to a trigger element (like a button) required complex JavaScript to calculate coordinates and handle viewport edges. The position: absolute property is limited to a containing block, which is often not the element you want to be relative to. Anchor Positioning provides a declarative, CSS-only solution to this common UI problem.

The mental model

Imagine giving one element a GPS tracker and having another element follow it. You designate an element as an "anchor" by giving it a name. Then, you tell a separate, absolutely positioned element to use that anchor's coordinates as its reference point. The positioned element can place itself relative to the anchor's edges, corners, or center, and even use the anchor's dimensions for its own sizing.

How it works

The process has two core parts. First, you designate an anchor element using the anchor-name property, for example: anchor-name: --my-anchor;. Second, you tell the element you want to position (e.g., a popover) to use that anchor. You do this by applying position: absolute and using the anchor() function in its inset properties, like top: anchor(--my-anchor bottom);. This line of CSS tells the popover to align its top edge with the bottom edge of the --my-anchor element. The system becomes truly powerful when you add fallback positions with the @position-try at-rule, letting the browser automatically find the best position to avoid clipping.

When to use it

Use Anchor Positioning for any component that needs to be positioned relative to another element but sits elsewhere in the DOM. It is the perfect tool for building robust tooltips, custom select menus, popovers, and context menus that intelligently avoid overflowing the viewport without any JavaScript.

When not to use it

Do not use Anchor Positioning for general page layout. It is not a replacement for CSS Grid or Flexbox, which are designed for the primary structure of a document. Anchor Positioning is a specialized tool for elements that pop out of the normal document flow and are tethered to another element. Using it for static layout is overly complex and semantically incorrect.

One canonical example

A tooltip for a button. The button element receives anchor-name: --btn;. The tooltip element gets position: absolute; and its position is set with top: anchor(--btn bottom); left: anchor(--btn center);. This places the tooltip just below the button and horizontally centered on it. By defining a fallback with @position-try, the browser can automatically move the tooltip above the button if it would otherwise render off-screen.