CSS Position Property Tutorial for Beginners | Absolute, Relative, Fixed, Sticky

In this CSS position property tutorial for beginners, you will learn each possible position property value including absolute, relative, fixed and sticky with examples. We will build a mini-project to show how these position property values are applied, too.

🚀 This lesson is part of a CSS for Beginners tutorial series playlist:

CSS Position Property Tutorial for Beginners | Absolute, Relative, Fixed, Sticky

(00:00) Intro
(00:05) Welcome
(00:26) Setup & Starter Code Review
(03:14) position: static
(03:51) position: absolute
(07:09) position: relative
(08:26) position: fixed
(10:06) Element overlap and z-index
(11:17) position: sticky
(12:42) Accessibility with position: absolute
(14:38) Mini-project starter code
(16:07) Section, header, footer styles
(18:10) Headers with position: sticky
(19:32) Choosing a fixed or sticky footer
(20:45) Adding a fixed social button
(22:09) Smooth scrolling between sections

⚙ Web Dev Tools:

📚 References:

📚 Typography Resources:

📚 Color Resources:

✅ Follow Me:

Was this tutorial about the CSS Position Property for Beginners helpful? If so, please share. Let me know your thoughts in the comments.

#css #position #property

[vincent]

The only channel that I search for ads and not skip it.
You are my hero sir, mad respect!

[AbigailAlabija]

I am a beginner and honestly, learning has been so much easier since i found your contents. Thank you so much for the simplified yet, detailed teaching.

[arielcrespo]

These videos are helping me understand a lot! I follow you from Argentina, Thanks

[thisbevibhor]

Dave, you are wonderful! The planning, execution of each topic is just wonderful. Thank you for what you do.

[yatin]

I'm amazed how the content is planned, approached, discussed and delivered Dave. At the end of each video I am just speechless how better you make us in CSS video after video. I can't still believe this gem of a content is free on YouTube. I ditched a Udemy course for the first time for your teaching. Thank you!

[pamphilemkp]

the best tutorial i have ever seen on YouTube about the position, it covered evrything i needed to know i am feeling fullfilled, thank you so much i can now say i have mastered this top with your clear explanation

[ahmad-murery]

Finally had a few spare minutes to watch the video,
There is at least one benefit of using sticky over fixed for footer and that is:
fixed position takes the element out of the flow so it may cover some page contents even if we scrolled down to the bottom of the page whilst sticky position does not,

Thanks Dave,

[cyriljephery]

best explanation anyone could ever ask for....thanks a lot...subscribed

[consciencedimension]

The way you teach things is really perfect. The github support is really super useful to make some tries while watching the video. And many other things. It's a really difficult exercise to do some videos like this. I wish other people doing videos were inspired by your amazing work.

[theonewhocode]

BEST tutorial on the CSS positions with great examples. Thank you for making it easier to understand :)

[ajaysan]

This was the best explanation ever! and the mini project was genius. Thank you so much

[tamanaalizada]

How can I express my extraordinary happiness that I found your channel 😇
Thanks a bunch for your best tutorial videos 😊 I hope you continue to the end. We all are waiting...!!!

[GabrielSouza-yyrq]

Dave this was by far the BEST class I've ever had on position property. Also, the example in the second part of the class was REALLY cool🤯🤯🤯 You are really an outstanding teacher. Thank you so much!

[hiwayshoes]

Another awesome tutorial, Dave! I’ve always had difficulty with position properties but you have cleared things up immensely for me. I also love all the ‘homework’ you assign when you include in the description of your tutorials the steps to follow to complete the tasks. You’re keeping me very busy -ha! …… Cheers 💖!

[Grihlo]

Thank you Dave for another great tutorial! I like the short practical application examples that you include in your videos. This way it's easier to understand all these different properties and options.

[fabrice]

The scroll-behavior: smooth; was really cool.

[anupamshahi]

Thank you so much Dave for making such an awesome video on this topic. It's really helpful.

[dipankarmaity]

your all class is very helpful for me.

[andygordon]

Another fantastic and inspirational tutorial. Thank you. Off to buy you several coffees now.

[codingSparrow]

Awesome explanation 👌🏾👌🏾👌🏾❤. One correction though, relative elements are positioned relative to its normal/default position, i.e., itself. if we set the values for right and bottom on ".relative", we can see the difference.

btw, have a nice day!!!