CSS Anchor Positioning Playground

CSS Anchor Positioning is a new browser API that lets you position one element relative to another — called an anchor — without JavaScript. You give the anchor element a name with anchor-name: --my-anchor, then point a floating element at it with position-anchor: --my-anchor and place it with inset-area.

anchor-name is a CSS property that registers an element as an anchor point. You provide a dashed-ident name (like --my-button). Floating elements can then reference this name with position-anchor to attach themselves to the anchor.

inset-area is a CSS property that replaces complex top/left/inset calculations with semantic placement values. Instead of calculating offsets manually, you write inset-area: top to place the floating element above the anchor, inset-area: bottom right to put it to the bottom-right, etc.

position-try-fallbacks lets the browser automatically try alternative positions if the element would overflow the viewport. For example, a tooltip anchored to top will flip to bottom if there's no room above. Values include flip-block, flip-inline, and their combination.

Floating UI and Popper.js solve the same problem with JavaScript — computing position, handling scroll, and detecting overflow. CSS Anchor Positioning moves all of this to the browser's CSS engine, eliminating JS overhead, reflow thrashing, and library dependencies. For simple use cases, native anchor positioning is faster and simpler.