CSS Position: A Comprehensive Guide to Mastering Element Placement

Dive into the depths of CSS position with comprehensive guide. Master the intricacies and enhance your web design skills effortlessly.

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.

⌚ 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

🔗 Links
✅ Using position absolute in a responsive layout: 

✅ More on stacking contexts: 

#css