CSS Anchor Positioning Lands in All Major Browsers
Position tooltips, popovers, and dropdowns relative to any anchor element , without a single line of JavaScript. Native anchor positioning replaces a decade of third-party positioning libraries.
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:
- Measure the anchor element's position
- Measure the popover's dimensions
- Calculate the optimal position accounting for viewport edges
- 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.