CSS Anchor Positioning Playground

Experiment with CSS anchor positioning — the native CSS feature that tethers a positioned element (tooltip, popover, dropdown) to an anchor element without any JavaScript coordinate math. Set the anchor name, choose a position area, configure fallbacks, and get live preview CSS ready to copy.

How to use the CSS Anchor Positioning Playground

1. Enter an anchor name — it must start with -- and is assigned to the anchor element via the anchor-name property. 2. Choose a position area — this is the shorthand for placing the positioned element relative to the anchor (e.g., top center places the tooltip above and centered). 3. Set the margin from the anchor edge. 4. Optionally choose a fallback — flip-block flips from top to bottom when there is insufficient viewport space. 5. Click Generate and copy the CSS. The live preview shows a mocked anchor + positioned element (static fallback is shown if the browser does not support anchor positioning).

CSS anchor positioning — tethered UI without JavaScript

CSS anchor positioning (CSS Anchor Positioning Module Level 1, Chrome 125+) solves one of the longest-standing JavaScript-required problems in web UI: placing a tooltip, dropdown, or popover relative to an anchor element, accounting for scroll and viewport overflow. Previously you needed getBoundingClientRect(), scroll listeners, and a library like Popper.js or Floating UI. With CSS anchor positioning, you declare the relationship in CSS and the browser handles the geometry.

The pattern is: give the anchor element anchor-name: --my-anchor, then on the positioned element set position: absolute, position-anchor: --my-anchor, and either use position-area: top center (shorthand) or the longhand top: anchor(--my-anchor bottom) / left: anchor(--my-anchor left) to pin specific edges. position-try-fallbacks: flip-block tells the browser to try flipping above/below if the element overflows the viewport.

Anchor positioning works with the Popover API naturally — a [popover] element renders in the top layer and can still reference an anchor in the normal flow. This means you get overflow-safe, layered tooltips with no JavaScript and no z-index battles. Browser support is currently Chrome/Edge 125+, with Firefox and Safari in development as of 2024 — use @supports (anchor-name: --x) to guard the feature.

Common use cases

  • Tooltips — anchor a tooltip to its trigger button and have it automatically flip above/below the button depending on viewport space, all in CSS.
  • Dropdown menus — tether a dropdown panel to a nav item with position-area: bottom left so it aligns to the button's bottom-left corner.
  • Inline popovers — attach a definition popover to a highlighted word in body text with no JS coordinate logic.
  • Sticky sidebar labels — anchor sidebar labels to their corresponding main-content sections so they track as the content scrolls.
  • Floating action buttons — tether a FAB to a specific scroll-container edge so it moves with the container, not the viewport.

Frequently asked questions

Is CSS anchor positioning supported in all browsers?
Chrome 125 and Edge 125 ship it. Firefox and Safari have it in active development but have not shipped it as of mid-2024. Use @supports (anchor-name: --x) { ... } to scope the CSS and provide a JavaScript-based fallback for other browsers.

What is the difference between position-area and the anchor() function?
position-area is a shorthand that covers the most common placement cases (e.g., "top center"). The anchor() function is the longhand — it lets you reference specific edges of the anchor to place an element's inset properties (e.g., top: anchor(--x bottom) aligns the top of the popup to the bottom of the anchor).

Can I use anchor positioning with the Popover API?
Yes — this is the intended combination. A [popover] element renders in the top layer (above all z-index), and anchor positioning lets it reference an anchor in the normal document flow. Together they give you overflow-safe, layered tooltips with zero JavaScript and zero z-index management.

What is position-try-fallbacks?
It is a list of fallback positions to try if the primary placement overflows the viewport. flip-block tries flipping the block axis (top/bottom); flip-inline tries flipping the inline axis (left/right); flip-start flips both. The browser evaluates each option in order and picks the first one that fits.

Do I need a polyfill for anchor positioning in production?
For production use today, yes — the CSS Anchor Positioning polyfill maintained by Oddbird provides reasonably good coverage for browsers that don't support it natively. Use it alongside @supports to progressively enhance.