CSS Anchor Positioning - Interactive CSS Lab | IconVault
Learn CSS anchor positioning with a live draggable demo. Try position-area, anchor() and @position-try, then copy production CSS. Free, in your browser.
CSS Anchor Positioning
Anchor tooltips with anchor(), position-area and @position-try, live
position-area
Drag the teal box in the demo. With flip enabled, drag it near an edge and the tooltip jumps to the opposite side instead of clipping.
Live demo
Drag the anchor box
Simulation: your browser lacks anchor positioning, so positions are computed in JS. The code below is still the real CSS syntax.
Copy the CSS
/* 1. Any element can become an anchor */
.anchor-btn {
anchor-name: --demo-anchor;
}
/* 2. The positioned element references it */
.tooltip {
position: absolute; /* fixed works too */
position-anchor: --demo-anchor;
position-area: bottom;
margin: 10px 6px; /* gap from the anchor */
position-try-fallbacks: flip-block, flip-inline; /* auto flip on overflow */
}
/* 3. Or declare explicit fallback positions */
@position-try --tooltip-top {
position-area: top;
}
.tooltip {
position-try-fallbacks: --tooltip-top;
}
/* 4. anchor() reads the anchor's edges directly */
.tooltip-arrow {
left: anchor(center);
bottom: anchor(top);
translate: -50% 0;
}5 of 5 free copies left. Everything runs in your browser.
anchor-name
Marks any element as an anchor. Names are scoped to the document, so --tooltip is fine as long as it is unique.
position-area
One or two keywords (top, bottom left, center) that place the element relative to the anchor. Replaces fragile translate math.
position-try-fallbacks
flip-block and flip-inline flip the position when the tooltip would overflow. @position-try lets you name exact fallbacks.
About this tool
IconVault's CSS Anchor Positioning lab is a hands-on playground for the new CSS anchor positioning spec. Drag the anchor box around the demo canvas, pick a position-area value, adjust the gap, and toggle position-try-fallbacks to watch the tooltip flip automatically near edges. Every control updates the live demo and the copyable CSS snippet in real time, so you learn the syntax by doing instead of reading. It is free and runs fully in your browser, with nothing to install.
Anchor positioning finally lets you tether an element, like a tooltip, popover or menu, to another element with pure CSS, replacing fragile JavaScript measurement code. If your browser supports the spec you get the real CSS engine driving the demo; older browsers get an honest JS simulation plus the exact code to paste once you open Chrome 125+, Edge 125+ or a recent Safari. The lab also covers the anchor() function for reading an anchor's edges and @position-try for declaring explicit fallback positions.
Frequently asked questions
Popular searches
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon