Mastering CSS Positioning Once and For All

► The CSS position property allows us to define where element boxes are going to reside on the webpage. This could be relative to their usual starting position, relative to parent element or ancestor elements, or relative to the viewport.

The position property can have one of five main properties: 

- position: static;
- position: relative;
- position: absolute;
- position: fixed;
- position: sticky;

We’ll learn all of these in this video.

In addition, we will look at offset properties, controlling content that overflows its container, element visibility, and z-index which allows us to control how elements stack.

► Timestamps:
0:00 Start
0:53 The position property and the containing block
2:05 Static positioning
2:27 Relative positioning & offset properties
4:45 z-index
6:43 Absolute positioning
12:03 Content Overflow
14:45 Fixed positioning
15:54 Creating a navbar with fixed positioning
18:20 Sticky positioning
19:22 Element visibility
21:06 End

► Get the code:

► Useful links:

► Social Media:

► Code & Projects:

[kajabrooks]

In college I don't achieve anywhere near the level of understanding on each subject that I do from watching one of your videos on the same material. My whole class is watching you now.

I have been using both absolute and relative positioning without understanding how they worked. It's just been trial and error until it finally looks right. Thank you for explaining things in such a clear, concise manner.

[leonardreveira]

I'm so glad I found your channel Craig. It's not easy understanding CSS and you are making it all clear. Thanks for making it easier.

[ogunjobitemitayo]

This tutorial is the most understanding i haver ever watched. very much simplified.

[plcasiraghi]

One of the best explanations of positioning on youtube. Thanks my man 🤝

[photoinshot]

Brilliant tutorial with very clearly explained and demonstrated examples, very useful. This is the best tutorial on the subject I have seen and helped me greatly. Many thanks!

[thirty]

Great format ...wonderful and very understandable presentation.... thank you sir

[janelleschuh]

Thank you Craig. I'm watching both your css html crash courses. I struggled a little bit with positions, and this video made it make sense. I'm enjoying your content and you're genuinely the first page I have stuck with and don't have to look for css elsewhere. Thank you, you explain the best!

[shilohdalby]

Thanks for the amazing tutorial. Learned everything you taught in this video. So helpful. Do more!

[jonathanperrett]

Excellent explanation of how CSS positioning works. I have watched many tutorials and have never fully undeerstood the way it functions. Until now thankyou :)

[clinthoon]

Very helpful video, I've been bothered about position: absolute and position: relative for a long time now and you cleared it up completely.

[MrBhe]

Perfect timing thanks Craig, content greatly appreciated as always!

[jamesdarnel]

Hey keep up the Great work! these are great references. cant wait for your JS stuff

[dobrilofotis]

Great video. Supremely helpful. I have't seen it so well explained

[andreypanin]

Great video! Why would the span element be allowed to position? Isn't it inline?

[saji]

It is suggestion. If possible.. Kindly zoom VS code screen while coding.. As the mobile user hardly can see the content in details