I just read the latest issue of Chris’ Corner on CodePen. I then read the following articles, all of which Chris links to:
- Chris’ article on The Big Gotcha of Anchor Positioning
- Temani Afif’s article on Why is Anchor Positioning not working?
- James Stuckey Weber’s article on CSS Anchor Positioning in Practice
Oh boy! My mind is completely fried. I had no idea anchor positioning was this complicated. I would be afraid to touch CSS anchor positioning if not for this recommendation from James to make it work reliably.
- Make the anchor and the positioned element siblings.
- Put the anchor first in the DOM.
I also saw the Winging It episode on ‘Debugging CSS Anchor Positioning‘. It really helped me develop a mental model of how anchor positioning works and why the gotchas exist.
Also, I totally agree with Tab Atkins-Bittner that dev tools really need a way to show the containing block for elements, especially absPos/fixedPos elements.