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 | Exact minimum not asserted; see feature-level MDN compatibility |
| Edge | Exact minimum not asserted; see feature-level MDN compatibility |
| Firefox | 147+ noted by web.dev text |
| Safari | Exact minimum not asserted; see feature-level MDN compatibility |
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