For decades, one of the most notoriously-challenging problems on the web has been sticking one element to another element, for things like tooltips and nested menus. The CSSWG has decided to provide a first-class solution to this problem, and it’s pretty friggin’ cool! In this tutorial, I’ll share the most useful parts I’ve found from this modern CSS feature.

Josh W. Comeau's platform provides resources in frontend development, React.js, and CSS, offering insightful articles, tutorials, and code examples. With a focus on accessible and creative web development techniques, Josh W. Comeau empowers developers to craft engaging user experiences and solve complex problems in the world of web development.

Josh W Comeau

A practical introduction to the CSS Anchor Positioning API, covering how to attach floating elements like tooltips to anchor elements using anchor-name, position-anchor, and position-area properties. Explains overflow handling with position-try-fallbacks for automatic flipping, and introduces the Level 2 anchored container queries for flipping tooltip carets. Also covers browser support strategies including the Oddbird polyfill and @supports feature queries.

Getting Started with Anchor Positioning • Josh W. Comeau

Link to this heading Flipped carets with anchored container queries

Link to this heading Supporting older browsers

<p>This is one of those CSS features that feels like it’ll quietly replace a surprising amount of JavaScript over the next few years</p>


<p>Would you ship the polyfill at 81% support, or keep a dumb tooltip fallback?</p>
