CSS Anchor Positioning: Replace Floating UI With CSS

Floating UI ships to every user who visits a page with a tooltip, dropdown, or popover. At 77.8 million npm downloads per week, it’s one of the most-installed packages in the JavaScript ecosystem — and it exists for one reason: browsers couldn’t position elements relative to each other without JavaScript. That gap is now closed. CSS Anchor Positioning hit Baseline 2026 with full cross-browser support in Chrome 125+, Firefox 132+, and Safari 18.2+. For new projects, the case for pulling in the library is gone.

Three Properties. That’s the Whole API.

CSS Anchor Positioning looks complex from the outside. In practice, you use three things:

• anchor-name: --my-btn — Declares any element as an anchor. The name follows CSS custom-property convention (double-dash prefix).
• position-anchor: --my-btn — Binds a positioned element to that anchor. The element must be position: fixed or position: absolute.
• position-area: block-end center — Places the element in one of nine grid areas around the anchor. The most practical shorthand for common tooltip and dropdown positioning.

The anchor() function gives you more control: top: anchor(bottom) sets the top edge of the tooltip exactly at the bottom edge of the button. Use position-area first; reach for anchor() when you need pixel-precise control.

A Tooltip in Ten Lines of CSS

Here’s a fully functional tooltip using the CSS Anchor Positioning API and the HTML Popover API. No JavaScript. No event listeners.

<button id="btn" popovertarget="tip">
  Hover me
</button>
<div id="tip" popover role="tooltip">
  This is a tooltip
</div>

#btn {
  anchor-name: --btn;
}

#tip {
  position: fixed;
  position-anchor: --btn;
  position-area: block-end center;
  position-try-fallbacks: flip-block;
  margin-block-start: 8px;
}

The popover attribute on the div handles visibility toggling, Escape-key dismissal, and light-dismiss (clicking outside) natively. The CSS places the tooltip below the button, centered. position-try-fallbacks: flip-block flips it above if there’s no room below.

Viewport Flipping Without JavaScript

The most painful part of using Floating UI was setting up middleware for boundary detection: pass viewport options, measure offsets, watch resize events. position-try-fallbacks replaces all of that with a single property.

• flip-block — Flip vertically (bottom ↔ top).
• flip-inline — Flip horizontally (right ↔ left).
• Custom @position-try rules — For edge cases that need more than a flip.

The browser handles viewport boundary detection. No JavaScript. No getBoundingClientRect(). No resize observers.

A Dropdown Menu

The same pattern scales to a dropdown menu that matches its trigger’s width:

<button popovertarget="menu" style="anchor-name: --menu-btn">
  Options ▾
</button>
<ul id="menu" popover>
  <li>Edit</li>
  <li>Delete</li>
</ul>

#menu {
  position: fixed;
  position-anchor: --menu-btn;
  position-area: block-end span-inline;
  min-inline-size: anchor-size(inline);
  position-try-fallbacks: flip-block;
  padding: 0;
  margin-block-start: 4px;
}

anchor-size(inline) reads the anchor’s width and applies it to the dropdown — no JavaScript measurement needed. These APIs feel low-level until you see how little code you need.

When to Keep Floating UI

Native positioning handles the common 80%. There are three scenarios where Floating UI still earns its place:

1. Virtualized lists. When anchor elements are dynamically inserted and removed (React Window, TanStack Virtual), the browser can lose anchor associations. Floating UI handles dynamic DOM better.
2. Complex multi-anchor logic. CSS supports one primary anchor per element. If a tooltip must reposition relative to multiple elements based on application state, you need JavaScript.
3. Legacy browser requirements. If your project targets browsers older than Chrome 125 or Firefox 132, wrap the CSS with @supports (anchor-name: --x) and keep the library as a fallback.

For existing Radix or shadcn projects: don’t rip out the library yet. Radix uses Floating UI internally and hasn’t migrated to native anchoring. Wait for the libraries to catch up — the pressure is there, and it will happen.

Ship It Now

CSS Anchor Positioning is part of Interop 2026, which means browser vendors committed to aligned implementations. The API is stable. The browser coverage is ~92%. The spec won’t shift under you.

The next tooltip or dropdown you build: skip the npm install. Write the CSS. The platform is ready.