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