Тёмный

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

Kevin Powell
Подписаться 908 тыс.
Просмотров 18 тыс.
50% 1

Check out Polypane: 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: 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: polypane.app/blog/offset-pare...
⌚ 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
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - 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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: 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!

Опубликовано:

 

17 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 35   
@daveturnbull7221
@daveturnbull7221 10 месяцев назад
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 😁
@AnthonyTrimble
@AnthonyTrimble 10 месяцев назад
This video should be marked as an "advertisement" lol
@jshstuff
@jshstuff 10 месяцев назад
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 :)
@kaustavroy6542
@kaustavroy6542 10 месяцев назад
Wow a handy product for sure, as always amazing video.
@samberg9720
@samberg9720 10 месяцев назад
Kevin you are the only one who can inspire me for css .. Thank you! .. Kind regards form europe/austria/vienna :-)
@muhammadahmadbilal7240
@muhammadahmadbilal7240 9 месяцев назад
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!
@skillzorskillsson8228
@skillzorskillsson8228 10 месяцев назад
Hey Kevin, could you maybe do a video together with Ana Tudor? I think that would be so amazing !
@linela
@linela 10 месяцев назад
For what? BS math in css?
@davidhurwich
@davidhurwich 10 месяцев назад
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.
@francescovetere
@francescovetere 10 месяцев назад
As always, thanks for your awesome content Kevin 😊
@LokeshKumar-tk7ri
@LokeshKumar-tk7ri 10 месяцев назад
Good content 👍
@SoreBrain
@SoreBrain 9 месяцев назад
I always thought I'm the only one who thinks the naming of position absolute and relative didn't make sense 😭
@user-hm9wz6nd5p
@user-hm9wz6nd5p 10 месяцев назад
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
@clevermissfox
@clevermissfox Месяц назад
If you search Kevin Powell html email there’s a video with an html email expert !
@Abdulrahman-ss3ds
@Abdulrahman-ss3ds 10 месяцев назад
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.
@KevinPowell
@KevinPowell 10 месяцев назад
The platform I use for hosting my courses is having a bad day 😅 - It's back up for me now though.
@Abdulrahman-ss3ds
@Abdulrahman-ss3ds 10 месяцев назад
​@@KevinPowellyes, thank you very much. It's working now
@GHOST8799
@GHOST8799 10 месяцев назад
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?
@GHOST8799
@GHOST8799 10 месяцев назад
haha nvm it's in the description
@ILoveWordPress
@ILoveWordPress 10 месяцев назад
I wonder how long will it take browser vendors to integrate something similar into their own browsers?
@cuber_dev
@cuber_dev 10 месяцев назад
@kevinPowell please make a tutorial on choosing colors
@chemedev
@chemedev 10 месяцев назад
Hum tu hablas español pero el título, descripción y comentarios del video me salen en inglés... es algo nuevo de RU-vid que hace una internacionalización del contenido?
@imukai
@imukai 10 месяцев назад
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.
@kilianvalkhof
@kilianvalkhof 10 месяцев назад
Same 🙈 got it fixed the instant after we finished recording this.
@definty
@definty 10 месяцев назад
Kevin's been on holiday!
@KevinPowell
@KevinPowell 10 месяцев назад
We finally had some warm weather and I was out for awhile over a weekend, that's about it 😅
@definty
@definty 10 месяцев назад
@@KevinPowell Impressive, you tan quick! That's about a months worth on tanning with the UK sun!
@Dream-Web
@Dream-Web 10 месяцев назад
What was that A11Y tab?
@ccgarciab
@ccgarciab 10 месяцев назад
Should be accessibility. Probably contrast, aria and semantic html?
@kilianvalkhof
@kilianvalkhof 10 месяцев назад
It show element properties related to accessibility, like the accessible name, role, any aria properties and contrast.
@stonebubbleprivat
@stonebubbleprivat 10 месяцев назад
Shouldn't that be marked as an ad? This would be an infomercial in tv
@chievo72
@chievo72 10 месяцев назад
Yeah, I was hoping to learn something cool.
@facts6824
@facts6824 9 месяцев назад
time waste.
@noursalepan9673
@noursalepan9673 10 месяцев назад
Hello sir your responsive conquering course has run into issue please help me it's saying this site cannot be reached sadly🫨
@KevinPowell
@KevinPowell 10 месяцев назад
Should be back up now :D
Далее
These CSS best practices might be holding you back
23:28
How to escape the container on only one side
28:48
Просмотров 46 тыс.
Best transport for daughter #shorts by Tsuriki Show
00:12
Getting started with CSS nesting
27:14
Просмотров 65 тыс.
6 things I wish I knew about CSS when I started
9:09
Просмотров 223 тыс.
How to create a responsive HTML table
27:19
Просмотров 202 тыс.
Do you understand how Flexbox does what it does?
7:56
Просмотров 166 тыс.
Probably the most underrated (and useful) CSS feature
21:11
26 Incredible Use Cases for the New GPT-4o
21:58
Просмотров 200 тыс.
The problems with viewport units
13:23
Просмотров 350 тыс.