CSS Popover + Anchor Positioning is Magical

Embrace the Cascade

CSS

November 20, 2024

If you’ve ever needed the positioning of an element to be connected (or anchored) to the position of another element, then you’ll be very excited about anchor positioning in CSS! It is new (as of the time of recording), but thankfully, we have a really good Polyfill, so we don’t have to worry about browser support!

🔗 Links

Complete Code: https://codepen.io/kevinpowell/pen/poMaLjR??editors=1100

Chrome Developer anchor positioning article: https://developer.chrome.com/blog/anchor-positioning-api

Popover Polyfill: https://github.com/oddbird/popover-polyfill

Anchor positioning polyfill: https://github.com/oddbird/css-anchor-positioning