January 2026 - Baseline newly available
CSS Anchor Positioning is a 2026 Baseline watch item for popovers and tooltips
CSS Anchor Positioning lets positioned elements align to an anchor without measuring coordinates in JavaScript. Use it to replace simple Floating UI or Popper.js patterns only after checking current Firefox and Safari support for your audience.
Last checked . This staged row is
verified:false and remains noindex until exact public effective dates are rechecked.Browser support note
| Browser | Public note |
|---|---|
| Chrome | 144+ per web.dev January platform article |
| Edge | 144+ per Chromium version alignment |
| Firefox | 147+ noted by web.dev text |
| Safari | 26+ per web.dev Browser Support block |
Copyable CSS snippet
.button { anchor-name: --cta; }
.popover { position: absolute; position-anchor: --cta; top: anchor(bottom); left: anchor(center); transform: translateX(-50%); }Fallback: Keep the anchored panel in normal flow or load a small positioning library behind @supports not (anchor-name: --cta).
Replaces: Floating UI or Popper.js for simple anchored panels, tooltips, teaching bubbles, and callouts.
Official sources
- Primary: web.dev: New to the web platform in January
- Secondary: MDN: CSS anchor positioning