CSS Anchor Positioning: The Complete Guide (2026)

What Anchor Positioning Solves

CSS Anchor Positioning lets you position an element relative to another element anywhere in the DOM, without JavaScript calculations. Before this, positioning a tooltip next to a button required measuring the button’s position with JavaScript, calculating coordinates, handling scroll offsets, and repositioning on resize. Anchor positioning replaces all of that with declarative CSS: ‘position this tooltip below that button, and if it overflows the viewport, flip it above instead.’

Core Syntax and Concepts

The core syntax: the anchor element gets anchor-name: --my-trigger;. The positioned element gets position: absolute; position-anchor: --my-trigger; top: anchor(bottom); left: anchor(left);. The anchor() function references edges of the anchor element. Combine with position-try-fallbacks to define automatic fallback positions when the primary position causes overflow — the browser handles repositioning without JavaScript.

Practical Use Cases

Use cases: tooltips that automatically flip when near viewport edges, dropdown menus positioned below their trigger button, popovers that stay connected to their anchor during scroll, context menus positioned at click coordinates, and floating labels that track form inputs. Combined with the popover attribute and ::backdrop, you can build complete tooltip/popover systems with zero JavaScript. Use the CSS Animation Generator to add entrance/exit animations.

Browser Support and Fallbacks

Anchor positioning is supported in Chrome 125+ and Edge 125+. Firefox and Safari support is in development as of 2026. For production use today, feature-detect with @supports (anchor-name: --x) and provide JavaScript-based fallback positioning for unsupported browsers. The API is stable in Chromium and is the future of positioned UI elements — worth learning now even if you need fallbacks for full cross-browser coverage.