CSS position deep dive

With over 700 videos on YouTube that are almost all entirely about CSS, I’ve somehow never made one that looks at all the CSS position values! I’ve compared relative and absolute in the past and done a few looks at sticky, but I felt like one deep dive video would be a good idea.

There are a handful of videos like this one on YouTube already, but I find they try to cover the information as quickly as possible and don’t go into enough detail on things like how containing blocks work, and some of the small gotcha’s that you can run into. They also tend to use random floating boxes, so I tried to root this one into something a little more realistic.

🔗 Links

⌚ Timestamps
00:00 - Introduction
01:10 - What we are starting with
01:40 - position: static
02:55 - position: relative
05:50 - position: absolute
13:47 - position: fixed
18:40 - position: sticky
24:20 - strange things that can break your positioning

#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!

[linux]

For years whenever i have a problem with position ive just been changing the value randomly until it works and ive been too lazy to research further, thank you for this video! Finally pushed me to learn this stuff

[MarkWalsh-gc]

I have been putting off updating my CSS knowledge for ages, the last couple of days I have been binging on a lot of your videos and it has certainly put the wind back in my sails! You do a fantastic job and explaining stuff, with just the right amount of detail without overwhelming or straying too far from the original purpose.

I can also sense the true passion you have for CSS in general, and learning / sharing that - which is a huge motivator for anyone watching! Awesome work

[jonsantos]

man, that align-self start to fix the sticky position is blowing my mind

[DieEneVent]

This is amazing, I was planning on teaching students about the position property next week. And I might use this video for some more information about the topic.

I always refer to Kevin as "my god" to my student. I consider myself quite an adequate frontender. But each video of Kevin just proves I have so much more to learn.
And as frustrating as it sometimes is, it's also cool to have something new to learn.

[AbdielPeguero-hodd]

I was having issues setting up my navbar. This video helped me understand what I was doing wrong and fix the problem. Thanks, Kevin for your help!

[clevermissfox]

22:09 never would’ve figured this out about sticky X display: flex w stretch. Great tip!

[millos]

This is "crazy"...

I am literally stuggling to study and finish my studies, and I soon have web developing exam with html, css, bootstrap and jsc... I am praying to Lord for help, and I literally was thinking about possitions in css... Because I did not understand well...

And now you my brother... Thank you so much!

[victornunes]

I used to make a workaround with "fixed top nav-bars" using CSS var: something like ' - - topbar-height: 4em '. Then, I applied this var to the top nav-bar's height property AND to the margin-top property of the element next in order. It did the trick, but using sticky is way better. Goog to know! Thanks!

[justivo]

Thank you for the amazing content! It's also great to note for the last part of the video "strange things that can break your positioning" that this could happen to position fixed as well. I once encountered an issue where I had a card with a fade up on scroll animation and inside the card was a custom popup with position fixed. However, the popup behaved as if it had position absolute instead of fixed. The problem was that in the end of the fade up the animation the card is left with a transform: translate(0, 0) or translate3d(0, 0, 0). I'm kind of used to strange situations in CSS, but this was a bit weirder that usual and took me a minute to figure out. I believe transform: none fixed the issue in my case. Hopefully no one else runs into something like that!

[Techvideos-qu]

Thank you kelvin, you always the Best 🏆

[nics]

Love how simple the explanation is and yet in depth in this tutorial. Really easy to understand. Thanks!

[tomaz-laurensoft]

I have to say, when CSS Grid get started in the beginning I was there happy, and I adopted CSS Grid and some Flexbox and that it is... But to know positions always will be a must for a professional web-development, I always have some knowledge about position, but after Kevin I can say: I don't have some knowledge about position, I really understand position... You are a CSS Master and you do by love, I love CSS too like you but now, it is complete because now I can say that I really like position and some time it can make me great things even with the new techs I really understand it now, thanks master Kevin you are awesome 🎉😊😊

[cantcode]

I just want to add some love to this comment section: you sir, are a Godsend. CSS is so frustrating but you make it easy. Thank you so much!

[ApurvaKashyap-kjqz]

how this video stays played even when u minimise youtube app, without any premium subscription of youtube while no other video has this thing

[atulkadyan]

i was searching for a good video about css positions and i am very glad you uploaded this video today super helpful especially with position sticky not working in some cases

Thanks

[youjean]

I'm not too much into CSS, but I simply love the content which you deliver.

[itsgojoverfr]

That's what im talking about, that's why he's the GOAT! THE GOAAT!!!!

[troublesum]

Wow, I was just saying to myself that I didn’t understand CSS positions like I should and should really deep dive into them; what a coincidence. Thanks Kevin.

[CommDao]

This reminded me I knew more than I thought-- and that's a huge help when it's so easy to get overwhelmed! 🙏

[lucienchu]

Millions of thanks on the STICKY part, never paid attention on it. It is so fantastic that I could ALWAYS learn something new from Kevin :)