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

Grid Lanes – The Future of Masonry Layout

on Winging It episode 33 with Stacy & Miriam on Jun 18 | 48 min

This long-debated solution for masonry layout is now available and it’s time to figure out how to use it. Join us for a deep dive into the workings of Grid Lanes.

see all Winging It posts
Winging It post type

Surprising Effects of CSS Shorthands

on Winging It episode 32 with Stacy & Miriam on May 28 | 45 min

CSS properties come in two excellent flavors – longhand properties have a direct impact on the element, while shorthand properties take a much more convoluted path. There’s a lot going on when we use a shorthand property, with hidden surprises, and reasons we might use one or the other.

see all Winging It posts
Winging It post type

Dos & Don’ts of Anchor Positioning

on Winging It episode 31 with Stacy, Miriam, & James on Apr 16 | 41 min

CSS anchor positioning isn’t baseline yet, and there’s good reason for that. You can use it, but it comes with some caveats. James, Stacy, and Miriam cover new resources to make anchor positioning easier, and work through some demos to help you understand how anchor positioning works. We also look…

see all Winging It posts