CSS Anchor Positioning has just reached Baseline 2026 status: supported across Chrome, Firefox, and Safari, which together cover well over 90% of global browser traffic. The name undersells the impact. For the first time, a stylesheet can declaratively say "position this element relative to that one" — without a single line of JavaScript to make it happen. The browser handles it.
What leaves your package.json
Libraries like Floating UI and Popper.js have spent years doing exactly this job: calculating where a tooltip or dropdown should land, watching viewport edges, and flipping position when there is not enough room. That logic runs on every render frame and costs memory, bytes, and configuration. CSS Anchor Positioning takes over all of it. The anchor-name property designates the reference element; position-anchor wires up the floating element to it; the anchor() function hands you exact coordinates inside your stylesheet. For edge-of-viewport flipping, @position-try fills in — CSS replaces the flip middleware too.
Pair it with the popover attribute
Combine CSS Anchor Positioning with the native popover attribute and you get show/hide behaviour and correct placement — entirely inside the browser, no framework layer required. That covers roughly 90% of the cases you used to reach for Floating UI. One caveat: Safari 18.2 supports core anchor placement but not @position-try fully. A sensible default position as a CSS fallback is enough to handle that gracefully.
Our take
We enjoy watching the browser absorb entire dependency categories. CSS Anchor Positioning is another case like :has() or container queries: the spec existed, but now browser support is wide enough to ship without a polyfill. Tooltip logic belongs in a stylesheet, not an rAF loop. If you are building a tooltip, dropdown, or popover today, this is the moment to pull Floating UI out and see how much CSS you get back.
