🎯 CSS Anchor Positioning Playground
Explore CSS anchor positioning — visually build anchor() and position-area layouts with live preview and copyable CSS
Click a cell to set where the positioned element sits relative to the anchor.
About this tool
CSS Anchor Positioning lets you position one element relative to another — a feature that previously required JavaScript. Define an anchor element with anchor-name and a positioned element that references it with position-anchor, then choose your positioning strategy: the newer position-area shorthand for quick placement ("top", "bottom left", "center"), or fine-grained anchor() edge functions for pixel-level control.
This playground gives you a live preview so you can see exactly where your positioned element lands before copying the CSS. Drag the anchor box to test edge cases; resize the tooltip to match your design. The generated CSS uses native anchor positioning syntax that works in Chrome 125+ and Edge 125+.
Try the Tooltip Top preset: position-area: top places the tooltip above the anchor. Or switch to anchor() mode and set top: anchor(--my-anchor bottom) for pixel-perfect control with an 8px gap.
FAQ
Which browsers support CSS anchor positioning? ›
Chrome 125+ and Edge 125+ ship anchor positioning. Firefox and Safari are developing support — check caniuse.com for the latest status. Use @supports or a JS polyfill for cross-browser compatibility.
What is the difference between position-area and anchor()? ›
position-area is a shorthand that places the element in one of 9 named regions relative to the anchor (top, bottom, left, right, center, and the four corners). anchor() gives you direct access to each edge and center of the anchor as a CSS value, so you can write `top: anchor(--name bottom)` for precise control.
Do I need position: absolute on the anchored element? ›
Yes. Anchor positioning only works on absolutely-positioned elements. The positioned element needs `position: absolute` and `position-anchor` referencing the anchor's `anchor-name`.
Can I use anchor positioning inside a scroll container? ›
Yes. By default, the positioned element is laid out in the same containing block as the anchor and scrolls with it. The `position-visibility` property lets you control whether the element hides when the anchor scrolls out of view.