CSS Anchor Positioning Explained

For years, positioning tooltips, dropdown menus, and popovers meant wrestling with JavaScript calculations. You’d measure elements, track scroll positions, and constantly recalculate to keep your UI elements properly aligned. CSS Anchor Positioning changes this entirely by letting you attach elements to each other using pure CSS—no JavaScript required.

What is CSS Anchor Positioning?

CSS Anchor Positioning is a native browser API that lets you position elements relative to other elements on the page. Think of it as creating invisible connections between elements: one acts as an “anchor” (the reference point), and another acts as the “target” (the positioned element).

This eliminates the need for JavaScript positioning libraries when building common UI patterns like tooltips, context menus, and floating dialogs. The browser handles all the complex calculations, including viewport boundaries and scroll positions.

Core Properties: Building Anchor Relationships

Setting Up Anchors with anchor-name

First, you need to designate an element as an anchor by giving it a unique identifier:

.menu-button {
  anchor-name: --main-menu;
}

The anchor name must start with double dashes (--), similar to CSS custom properties.

Connecting Elements with position-anchor

Next, connect your target element to the anchor:

.dropdown-menu {
  position: absolute;
  position-anchor: --main-menu;
}

The target element must have position: absolute or position: fixed to work with anchor positioning.

Positioning Elements with position-area

The position-area property provides the simplest way to position your target. It uses a 3×3 grid model with the anchor at the center:

.dropdown-menu {
  position: absolute;
  position-anchor: --main-menu;
  position-area: bottom center;
}

You can use physical values (top, bottom, left, right) or logical values (block-start, inline-end) for better internationalization support. The span- prefix lets elements extend across multiple grid cells:

.tooltip {
  position-area: top span-inline;
}

Fine-Tuning with the anchor() Function

For precise control, use the anchor() function with inset properties:

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

This positions the tooltip’s top edge at the anchor’s bottom edge, with left edges aligned. You can also reference specific anchors explicitly:

.multi-anchor-target {
  top: anchor(--anchor-1 bottom);
  right: anchor(--anchor-2 left);
}

Responsive Sizing with anchor-size()

The anchor-size() function lets you size elements based on their anchor’s dimensions:

.dynamic-tooltip {
  position-anchor: --button;
  width: anchor-size(width);
  max-height: calc(anchor-size(height) * 2);
}

This creates tooltips that scale proportionally with their anchors—perfect for responsive designs.

Handling Edge Cases with position-try

What happens when your positioned element hits the viewport edge? The position-try property provides fallback positions:

.context-menu {
  position: absolute;
  position-anchor: --menu-trigger;
  position-area: bottom start;
  position-try: flip-block, flip-inline;
}

The browser automatically tries alternative positions when the primary position would cause overflow. Built-in keywords like flip-block and flip-inline handle common scenarios, or you can define custom fallbacks:

@position-try --compact-menu {
  position-area: top;
  width: 200px;
}

.context-menu {
  position-try: --compact-menu, flip-block;
}

Browser Support Status

As of late 2024, CSS Anchor Positioning has growing browser support:

• Chrome/Edge: Full support since version 125
• Safari: Supported from version 18
• Firefox: Implementation in progress

For production use, consider the Oddbird polyfill which provides compatibility back to Firefox 54 and Chrome 51. Feature detection is straightforward:

@supports (anchor-name: --test) {
  /* Anchor positioning styles */
}

Practical Implementation Tips

When implementing CSS anchor positioning for tooltips and menus:

1. Always reset default positioning for popover elements: inset: auto
2. Use logical properties for better internationalization
3. Combine with the Popover API for complete JavaScript-free interactions
4. Remember accessibility—add appropriate ARIA attributes to maintain semantic relationships

Conclusion

CSS Anchor Positioning transforms how we build floating UI elements. By moving positioning logic from JavaScript to CSS, we get better performance, cleaner code, and automatic handling of edge cases. While waiting for complete browser support, the polyfill provides a solid path forward for production use. Start experimenting with tooltips and dropdown menus—you’ll quickly appreciate the simplicity of declaring relationships rather than calculating positions.

FAQs

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..