The unknown fundamentals of CSS: Offset parents and Stacking Context explained

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

⌚ 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

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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.

---

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

[daveturnbull]

While Polypane would be a really great tool for any full time dev I don't do anywhere near enough to be able to justify it (I know £8/month is not a lot but I'm a pensioner). Just from this quick demo it's obvious that Killian has done an amazing job with this and his explanation of both the offset parent and stacking context were able to finally start sinking in to my thick skull 😁

[samberg]

Kevin you are the only one who can inspire me for css .. Thank you! .. Kind regards form europe/austria/vienna :-)

[jshstuff]

Unrelated: I’m a bit bitter that digital ocean killed off css-tricks, but I’m extra grateful that you’re here consistently feeding me with css related content and keeping me inspired to learn. tyvm :)

[skillzorskillsson]

Hey Kevin, could you maybe do a video together with Ana Tudor? I think that would be so amazing !

[AnthonyTrimble]

This video should be marked as an "advertisement" lol

[davidhurwich]

Is there a way to view stacking context in the dev tools for Chrome or Firefox? Something that showed the information of what is the base stacking-context layer would be helpful to know.

[kaustavroy]

Wow a handy product for sure, as always amazing video.

[francescovetere]

As always, thanks for your awesome content Kevin 😊

[حيدرنوريطالب]

Hi Kevin,
thank you for the amazing content
and it is very useful for me
but I hope that you can make a video about email design with HTML

[GHOST]

When referring to an offset parent, and the role it has in terms of positioning, I'm curious if it has any significance when we're talking about containing blocks?

[SoreBrain]

I always thought I'm the only one who thinks the naming of position absolute and relative didn't make sense 😭

[catt_]

@kevinPowell please make a tutorial on choosing colors

[Abdulrahman-ssds]

Hi Kevin, Thank you for the great content, I would like to inform you that your own site of the Conquering Responsive Design course is down.

[imukai]

While this video is meant to highlight the offset stuff -- it's a defacto intro to this polypane thing which is neat. But with that, my eye twitches seeing NaN in his mock devtools interface after setting the element to absolute positioning.

[ILoveWordPress]

I wonder how long will it take browser vendors to integrate something similar into their own browsers?

[muhammadahmadbilal]

Hi Kevin,

I hope you're doing well. I've been thoroughly enjoying your content, and I appreciate the effort you put into creating such valuable videos. I was wondering if it would be possible to consider upgrading the video quality to 4k, if feasible. I believe this enhancement could elevate the overall viewing experience even further. Thank you for your dedication to delivering great content!

[stonebubbleprivat]

Shouldn't that be marked as an ad? This would be an infomercial in tv

[chemedev]

Hum tu hablas español pero el título, descripción y comentarios del video me salen en inglés... es algo nuevo de YouTube que hace una internacionalización del contenido?

[noursalepan]

Hello sir your responsive conquering course has run into issue please help me it's saying this site cannot be reached sadly🫨