CSS Anchor Positioning

Tooltips, dropdowns, and popovers that position themselves relative to trigger elements using native anchor() — no Floating UI or Popper.js needed.

Uses anchor-name, position-anchor, position-area, anchor() function, and @position-try fallbacks.

Experimental Chrome 125+ · Firefox 131+ (partial)

Tooltip

Hover the button to toggle a tooltip anchored above it via position-area: top center. Entry animation via @starting-style + popover.

Positioned with CSS anchor() -- no JS layout

Dropdown Menu

Click to open a menu anchored below the trigger via position-area: bottom span-right. Light-dismiss via native popover.

Popover Card

Click the info icon for a rich card positioned with explicit anchor(bottom) / anchor(center). Includes @position-try fallback for overflow.

Anchor Positioning

CSS Anchor Positioning eliminates the need for JavaScript positioning libraries. Elements declare an anchor name, and positioned elements reference that anchor via the anchor() function or position-area shorthand.

Fallback positions are defined with @position-try, allowing the browser to auto-flip when an element would overflow the viewport.

anchor-name position-area @position-try popover

Key CSS Patterns

/* 1. Declare anchor on trigger */
.trigger {
  anchor-name: --my-anchor;
}

/* 2. Attach positioned element to anchor */
.positioned {
  position-anchor: --my-anchor;
  position: fixed;

  /* Shorthand: place in a region */
  position-area: top center;

  /* Or explicit: use anchor() function */
  top: anchor(bottom);
  left: anchor(center);
}

/* 3. Fallback when overflowing viewport */
@position-try --flip-top {
  bottom: anchor(top);
  top: auto;
}