How to Use CSS Anchor Positioning TODAY

Learn how the new anchor positioning tools in CSS work, from common use cases like tooltips to wholly new experiences that become possible. James Stuckey Weber will teach us how we can use it in our projects today. Upcoming episodes: https://lwj.dev/schedule Links & Resources: - James's Personal Portfolio: https://jamessw.com/ - OddBird: https://www.oddbird.net/ - Miriam Suzanne's Website: https://www.miriamsuzanne.com/ - Anchor Positioning MDN Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning - Anchor Tool - Visualisation Tool : https://anchor-tool.com/ - OddBird Anchor Positioning Blog Posts: https://www.oddbird.net/tags/anchor-positioning/#title - Awesome CSS Anchor Positioning repo: https://github.com/oddbird/awesome-anchor-positioning - CSS Anchor Positioning Polyfill: https://www.npmjs.com/package/@oddbird/css-anchor-positioning - Upcoming CodeTV Schedule: https://codetv.dev/series/learn-with-jason/s8 Watch future episodes live at https://lwj.dev/live This episode was sponsored by: - Tuple: https://lwj.dev/tuple Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/) 00:00 Introduction 00:36 Meet James Stuckey Weber 02:44 Introduction to CSS Anchor Positioning 03:20 Challenges with Traditional Positioning 06:19 Benefits of CSS Anchor Positioning 08:36 Browser Support and Interop 2025 13:41 CSS Anchor Positioning Demo 16:00 Basic Popover Implementation 20:56 Advanced Positioning Techniques 30:05 Using Anchor Functions 36:24 Exploring Anchor Tool 43:32 Yearbook Layout with CSS Anchor Positioning 47:50 Positioning Elements with Anchors 52:03 Using Anchor Scope 54:54 Debugging and Fixing Issues 01:03:39 Styling and Positioning Asides 01:12:58 Adding Word Count and Final Adjustments 01:17:38 Resources and Conclusion