Interactive CSS Anchor Positioning Tutorial
A hands-on guide to the future of CSS popovers and tooltips.
Heads up!
CSS Anchor Positioning is a cutting-edge feature. As of late 2025, you need a browser like Chrome or Edge with "Experimental Web Platform features" enabled via
chrome://flags
for these demos to work.
1. The Basics: `anchor-name` and `anchor()`
Anchor positioning allows you to tether an absolutely positioned element to another element (the "anchor") without complex JavaScript. The connection is made with two new CSS properties:
anchor-name: --my-anchor;: You apply this to the element you want to anchor *to*. The name must start with--.position-anchor: --my-anchor;: You apply this to the element you want to position. It links this element to the anchor. (Note: In some specs/implementations, this is implicit and you just use the `anchor()` function).top: anchor(--my-anchor bottom);: You use theanchor()function to set the positioned element's coordinates, referencing the anchor's physical boundaries (top, bottom, left, right, center, or percentages).
Live Demo
Editable CSS
2. Staying in Viewport with `@position-fallback`
What happens if your anchored element goes off-screen? Anchor positioning provides a powerful, CSS-only solution: the
@position-fallback
at-rule. You define a set of alternative positions, and the browser will automatically pick the first one that fits within the viewport.
In this demo, drag the anchor button around. Watch how the tooltip "flips" to stay visible when you get close to the edges of the container.
Note on an Edge Case: You might notice that if you drag the anchor button very close to the bottom edge, the tooltip can get cut off instead of flipping to the top. This is not an error in the demo's code, but rather a limitation of the browser's current experimental implementation of this feature.
The CSS is written correctly, but the browser doesn't yet perfectly detect that the element is being clipped by its container. As a result, it applies the first fallback rule (position below) and doesn't proceed to the next `@try` block. This behavior is expected to be resolved as the feature matures.
Live Demo (Drag the button!)
Editable CSS
3. Sizing with `anchor-size()`
Anchor positioning isn't just for coordinates. You can also dynamically size an element based on its anchor's dimensions using the
anchor-size()
function. This is incredibly useful for things like dropdown menus that should match the width of the button that triggered them.
In this demo, try resizing the anchor box (drag the bottom-right corner). The positioned element's width will automatically match it.