CSS Anchor Positioning Playground
Position a tooltip or popover relative to any element on the page using native CSS anchor positioning — no JavaScript, no positioning library. Pick a position-area from the 3x3 grid, adjust the gap, and copy the generated CSS.
Live Preview — Chrome 125+
The dark tooltip is positioned entirely with CSS anchor positioning — no JavaScript, no parent/child DOM relationship required between it and the green anchor box. In a browser without support yet, it falls back to a fixed corner position rather than breaking.
position-area
Position mode
Use fixed for viewport-level UI like a tooltip that must escape a scrolling/clipped ancestor — the classic case anchor positioning was built to solve without a portal.
How to use
Pick a position-area
Click any of the 9 grid cells to choose where the target sits relative to the anchor — top, bottom-right, center, and so on.
Adjust the gap
Drag the slider to set the margin between the anchor and the positioned element.
Choose absolute or fixed
Use fixed when the positioned element needs to escape a scrolling or overflow: hidden ancestor — the classic tooltip-clipping problem.
Copy the CSS
Copy the anchor-name, position-anchor, and position-area declarations and drop them straight into your stylesheet.