The unknown fundamentals of CSS: Offset parents and Stacking Context explained
Channel: Kevin Powell
Date: 2023-07-06

Check out Polypane: https://polypane.app/?ref=kevin (affiliate link, so if you do sign up for it, you also help support this channel).

A lot of people have no idea about the offset parent (you’ll also hear me call this the Containing Block), and have trouble understanding what’s going on with Stacking Context. Kilian recently added some features to help us better understand what’s going on with them, so he joined me to explore the features as we do our best to explain what they are.

🔗 Links 
✅ Polypane: https://polypane.app/?ref=kevin (affiliate link, so if you do sign up for it, you also help support this channel) 
✅ If you prefer written content, Killian has made what we talked about into an article: https://polypane.app/blog/offset-parent-and-stacking-context-positioning-elements-in-all-three-dimensions/

⌚ Timestamps
00:00 - Introduction
00:39 - Exploring Polypane’s tools
06:08 - Explaining Offset Parent
12:53 - Explaining Stacking Context

#css

--

Come hang out with other dev's in my Discord Community
💬 https://discord.gg/nTYCvrK

Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺 https://www.twitch.tv/kevinpowellcss

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: https://www.patreon.com/kevinpowell

---

My editor: VS Code - https://code.visualstudio.com/

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!