F uture CSS: Anchor Positioning

submited by

Style Pass

2023-03-17 04:00:05

Anchor positioning might be one of the most exciting features coming to CSS. It is currently available under an experimental flag in Chrome Canary, and after playing with it for a bit, I couldn’t stop myself from sharing what I found. In this article, I will show you some of my experiments.

Jhey Tompkins (one of the spec editors) did publish an article that describes the basics rather nicely — “Tether elements to each other with CSS anchor positioning ” — you could want to read it to get an introduction to the whole concept of anchoring things, and for what we could use it.

I won’t try to re-explain the specs or rephrase what Jhey wrote (I did most of my experiments before his article and without looking into his prior demos), but I will attempt to provide a brief description of anchor positioning as I understand it.

In short, anchor positioning augments absolute positioning by allowing us to use the positions and dimensions of elements other than the element’s usual positioning context.