CSS Anchor Positioning Lands in All Major Browsers

CSS Anchor Positioning is now available in Chrome, Firefox, and Safari. This is the feature that makes JavaScript positioning libraries obsolete for the most common UI patterns.

The problem it solves

For years, positioning a tooltip or dropdown relative to its trigger element required JavaScript:

1. Measure the anchor element's position
2. Measure the popover's dimensions
3. Calculate the optimal position accounting for viewport edges
4. Update on scroll, resize, or layout shift

The CSS solution

/* The anchor */
.button { anchor-name: --trigger; }

/* The positioned element */
.tooltip {
  position: absolute;
  position-anchor: --trigger;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;
}

No JavaScript. The browser handles scroll, resize, and layout shift automatically. It even flips the tooltip when it would overflow the viewport.

What's now possible

• Tooltips and popovers, no library needed
• Dropdown menus, anchored to their trigger with automatic edge detection
• Context menus, positioned relative to the click target
• Form validation messages, attached to the relevant input

Migration path

You can use anchor positioning as a progressive enhancement today. Keep your JavaScript positioning fallback, detect support with @supports, and let modern browsers skip the JS overhead.