Anchor Positioning
Overview
Historically, placing a tooltip exactly above a specific button required complex JavaScript calculations (getBoundingClientRect) that had to update every time the user scrolled. Native CSS Anchor Positioning is a groundbreaking 2026 standard that allows you to tether an absolute element directly to another element using pure CSS.
Syntax
/* 1. Define the Anchor (The trigger button) */
.trigger-btn {
/* Give the anchor a unique dashed name */
anchor-name: --my-tooltip-anchor;
}
/* 2. Define the Tethered Element (The tooltip) */
.tooltip {
position: absolute;
/* Link it to the specific anchor */
position-anchor: --my-tooltip-anchor;
/* Snap the bottom of the tooltip to the top of the button */
bottom: anchor(top);
/* Align the centers horizontally */
justify-self: anchor-center;
/* Add 10px of spacing between them! */
margin-bottom: 10px;
}Common Pitfalls
- Using Anchor Positioning in environments that must support ancient browsers. This is a very modern API. If you need it to work on legacy Safari, you still need to use a JS library like Floating UI.
- Forgetting to handle scroll collisions. If the tooltip is above the button, and the user scrolls up, the tooltip might clip out of the screen. You must use
@position-tryrules to tell it to dynamically flip to the bottom if space runs out.
Interview Questions
Performance. JavaScript has to attach scroll and resize event listeners and manually recalculate DOM matrix math on every frame, which can cause jank. CSS Anchor Positioning is calculated natively by the browser's layout engine on the main thread, resulting in zero latency.
Real-World Example
A highly robust Popover menu tethered to a button, flipping dynamically if space runs out.
.menu {
position: absolute;
position-anchor: --dropdown-btn;
/* Default: Bottom left */
top: anchor(bottom);
left: anchor(left);
/* The browser automatically tries these fallbacks if it hits the screen edge! */
position-try-options: flip-block, flip-inline;
}Check Your Knowledge
Test your understanding of Anchor Positioning with these quick questions.