Debugging CSS Anchor Positioning

With special guest Tab Atkins-Bittner

on Winging It episode 16 with Miriam & James on February 20, 2025 | 65 mins

It is frustrating to track down why an anchor isn’t being found. James and Miriam talk with Tab Atkins-Bittner about ways to troubleshoot CSS Anchor Positioning issues, and dive into the details to get a better understanding of how Anchor Positioning works.

Check out our Winging It conversations about design, frontend, and backend development.

Winging It episode 8: CSS Anchor Positioning in Practice

Subscribe to Channel »

What we cover:

What is Anchor Positioning?
What are containing blocks?
Pseudo elements that can be anchors
DOM order matters for absolute positioned anchors
Anchoring dialogs and popovers
Anchors in the Shadow DOM
Inline styles in browsers that don’t support a declaration
anchor-scope
Recommendation for success
Ways to improve users’ understanding of containing blocks rules
Coming soon for Anchor Positioning

Demos:

Codepen Collection

Recent Episodes

Winging It post type

Mixins & Functions to Streamline CSS

With special guest Roma Komarov

on Winging It episode 24 with Miriam & Stacy on Aug 27 | 59 min

The CSS Working Group got together in August to discuss a range of old and new issues. The following week, Miriam Suzanne and Stacy Kvernmo chatted with CSS expert Roma Komarov about how to create reusable and more flexible CSS using mixins and functions, what happened in the CSSWG meetings…

see all Winging It posts
Winging It post type

Container queries are widely available!

on Winging It episode 23 with Miriam on Aug 13 | 3.5 min

Happy 30-month anniversary to Container Queries – shipping in every browser since February of 2023. It was supposed to be impossible, but here we are!

see all Winging It posts
Winging It post type

Avoid this mistake when anchor positioning a popover!

on Winging It episode 22 with James on Aug 12 | 1 min

Are you positioning a popover with CSS anchor positioning and position-area? Make sure to override the default margins on the popover.

see all Winging It posts