CSS Anchor Positioning
Position elements relative to other elements without JavaScript. The Anchor Positioning API brings tooltips, popovers, and dropdown menus into pure CSS.
The Problem Anchor Positioning Solves
For years, positioning a tooltip next to a button or a dropdown below an input required JavaScript. You'd calculate positions, handle scrolling, deal with viewport edges - it was a nightmare. Anchor Positioning changes everything.
/* Define an anchor */
.button {
anchor-name: --my-button;
}
/* Position relative to the anchor */
.tooltip {
position: absolute;
position-anchor: --my-button;
bottom: anchor(top);
left: anchor(center);
translate: -50% -8px; /* Center and add gap */
}Key Concepts
- anchor-name: Defines an element as an anchor point
- position-anchor: Links a positioned element to an anchor
- anchor(): Function that references anchor edges (top, bottom, left, right, center)
Basic Positioning
Position tooltips, badges, and notifications relative to any element.
.button { anchor-name: --my-anchor; }
/* Tooltip above button */
.tooltip-top {
position: absolute;
position-anchor: --my-anchor;
bottom: anchor(top);
left: anchor(center);
translate: -50% -8px;
}
/* Tooltip below button */
.tooltip-bottom {
position: absolute;
position-anchor: --my-anchor;
top: anchor(bottom);
left: anchor(center);
translate: -50% 8px;
}
/* Tooltip to the right */
.tooltip-right {
position: absolute;
position-anchor: --my-anchor;
left: anchor(right);
top: anchor(center);
translate: 8px -50%;
}Real-World Examples
Dropdown Menu
.trigger {
anchor-name: --dropdown-anchor;
}
.menu {
position: absolute;
position-anchor: --dropdown-anchor;
top: anchor(bottom);
left: anchor(left);
margin-top: 8px;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.trigger:hover + .menu,
.menu:hover {
opacity: 1;
pointer-events: auto;
}Notification Badge
.icon-button {
anchor-name: --icon-anchor;
}
.badge {
position: absolute;
position-anchor: --icon-anchor;
top: anchor(top);
left: anchor(right);
translate: -30% -30%; /* Overlap corner */
}Browser Support
⚠️ Cutting-Edge Feature
CSS Anchor Positioning is brand new!
- Chrome 125+: Supported behind flag ✅
- Firefox: In development 🚧
- Safari: In development 🚧
For production: Use JavaScript fallbacks or wait for broader support. Consider using a polyfill or CSS feature detection.
/* Feature detection */
@supports (anchor-name: --test) {
/* Use anchor positioning */
.tooltip {
position-anchor: --my-anchor;
bottom: anchor(top);
}
}
/* Fallback for unsupported browsers */
@supports not (anchor-name: --test) {
.tooltip {
position: absolute;
top: -40px; /* Manual positioning */
}
}Why This Matters
Anchor Positioning removes the need for thousands of lines of JavaScript positioning logic. No more:
- ❌ Calculating element positions with getBoundingClientRect()
- ❌ Handling scroll events to reposition tooltips
- ❌ Detecting viewport edges and flipping positions
- ❌ Heavy libraries like Popper.js for simple tooltips
It's all declarative CSS now. Define relationships between elements and let the browser handle the rest.