CSS anchoring

Guide to the new css anchoring method

How do you currently tether one element to another? You might try tracking their positions, or use some form of wrapper element.

These solutions often aren’t ideal. They need JavaScript or introduce extra markup. The CSS anchor positioning API aims to solve this by providing a CSS API for tethering elements. It provides a means to position and size one element based on the position and size of other elements.

You can try out the CSS anchor positioning API in Chrome Canary behind the “Experimental Web Platform Features” flag. To enable that flag, open Chrome Canary and visit chrome://flags. Then enable the “Experimental web platform features” flag.

There is also a polyfill in development by the team at Oddbird. Be sure to check the repo at github.com/oddbird/css-anchor-positioning.

Note that this API is still in an experimental stage and could change. This article covers the important parts at a high level. The current implementation also isn’t completely in sync with the CSS Working Group spec.