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

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
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.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
• CSS Tutorials for Begi...
🔗 All Resources for this CSS Tutorial Series: github.com/gitdagray/css_course
📬 Course Updates ➜ courses.davegray.codes/
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:
🔗 Chrome Browser: www.google.com/chrome/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
🔗 vscode-icons VS Code Extension: marketplace.visualstudio.com/...
🔗 Github Themes VS Code Extension: marketplace.visualstudio.com/...
🔗 W3C CSS Validator: jigsaw.w3.org/css-validator/
🔗 Specificity Calculator: specificity.keegan.st/
🔗 HTML Special Characters and Entities: unicode-table.com
📚 References:
🔗 MDN CSS: developer.mozilla.org/en-US/d...
🔗 MDN CSS Basics: developer.mozilla.org/en-US/d...
🔗 MDN CSS Selectors: developer.mozilla.org/en-US/d...
🔗 MDN - How to Apply Colors to HTML Elements with CSS: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Values and Units: developer.mozilla.org/en-US/d...
🔗 MDN - The Box Model: developer.mozilla.org/en-US/d...
🔗 MDN - Styling Lists: developer.mozilla.org/en-US/d...
🔗 MDN - Display Property: developer.mozilla.org/en-US/d...
🔗 MDN - Floats: developer.mozilla.org/en-US/d...
🔗 MDN - Columns: developer.mozilla.org/en-US/d...
🔗 MDN - Margin Collapsing: developer.mozilla.org/en-US/d...
🔗 MDN - White-Space: developer.mozilla.org/en-US/d...
🔗 MDN - Positioning: developer.mozilla.org/en-US/d...
📚 Typography Resources:
🔗 MDN: Fundamental Text and Font Styling - developer.mozilla.org/en-US/d...
🔗 CSSFontStack.com: Websafe Fonts - www.cssfontstack.com/
🔗 MDN: Styling Links - developer.mozilla.org/en-US/d...
📚 Color Resources:
🔗 Coolors Contrast Checker: coolors.co/contrast-checker/1...
🔗 WebAIM Contrast Checker: webaim.org/resources/contrast...
🔗 Coolors Palette Generator: coolors.co/
🔗 HTML Color Codes: htmlcolorcodes.com/
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
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

[@DaveGrayTeachesCode]

The CSS Position property can be very useful. This tutorial looks at static, absolute, relative, fixed, and sticky position values. After covering the fundamentals of each, this tutorial also includes a small mini-project to show how the different position values may be applied. If you're at the beginning your CSS journey, I suggest going to the start of my CSS for Beginners playlist here: kzbin.info/aero/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

[@vincent3542]

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

[@DaveGrayTeachesCode]

Thank you for the support, Vincent! 💯🙏

[@arielcrespo9021]

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

[@DaveGrayTeachesCode]

You're welcome, Ariel!

[@user-fc5fz4rr3w]

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.

[@thisbevibhor]

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

[@DaveGrayTeachesCode]

You're very welcome!

[@yatin1370]

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 KZbin. I ditched a Udemy course for the first time for your teaching. Thank you!

[@DaveGrayTeachesCode]

Glad it has helped! You're welcome!

[@pamphilemkp5841]

the best tutorial i have ever seen on KZbin 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

[@DaveGrayTeachesCode]

Glad to hear I helped! 🚀

[@anupamshahi1156]

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

[@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.

[@DaveGrayTeachesCode]

Glad it was helpful!

[@RocoSafreti]

Great video and series.

[@cyriljephery2662]

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

[@DaveGrayTeachesCode]

Thank you, Cyril! 💯

[@fikilekentane6982]

tnx Dave for excellent tuts 👌

[@theonewhocode3117]

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

[@DaveGrayTeachesCode]

Glad to hear it helped!

[@tamanaalizada4088]

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

[@DaveGrayTeachesCode]

You're welcome! 💯 I will keep going 🚀

[@GabrielSouza-yy2rq]

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!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@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,

[@DaveGrayTeachesCode]

Spot on, Ahmad! Good to hear from you! 💯

[@ajaysan2765]

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

[@DaveGrayTeachesCode]

You're welcome!

[@danieljing9319]

clear & easy to understand example, well designed and awesome stuff!

[@DaveGrayTeachesCode]

Thank you, Daniel! 🙏

[@andygordon6880]

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

[@1conscience0dimension]

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.

[@DaveGrayTeachesCode]

Glad to hear you like it!

[@dipankarmaity1591]

your all class is very helpful for me.

[@DaveGrayTeachesCode]

Glad to hear that!

[@fabrice9848]

Thank you Dave.

[@DaveGrayTeachesCode]

You're welcome!

[@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 💖!

[@DaveGrayTeachesCode]

Glad it was helpful! 💯🚀

[@elvispontes4165]

Excelente as always. Thanks.

[@DaveGrayTeachesCode]

Thank you!

[@fabrice9848]

The scroll-behavior: smooth; was really cool.

[@ravisankar9122]

Thank you

[@iambrijeshtoo]

Thank you!

[@DaveGrayTeachesCode]

You're welcome!

[@massihpoya3337]

great explanation thanks again

[@DaveGrayTeachesCode]

You are welcome, Massih! 💯

[@letuslearnmore]

Great teacher

[@DaveGrayTeachesCode]

Thank you! 😃

[@willyhorizont8672]

Thanks dave

[@DaveGrayTeachesCode]

You're welcome, Willy!

[@brito22419]

i've never commented on a youtube video but this is awesome

[@DaveGrayTeachesCode]

Thank you!

[@vivekanand5900]

Your explanation is great..I daily learn something new by watching your videos..😇

[@DaveGrayTeachesCode]

Glad to hear that!

[@godwinmercy5606]

Wow this is nice The this giving me deeper understanding of CSS plz how did you get that buttonon your css

[@wirefred]

Thanks Sir

[@DaveGrayTeachesCode]

You're welcome, Mordecai!

[@codingSparrow143]

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

[@jaydeepjoshi9434]

Hey Dave ,are you planning to make a next js playlist in near future? Your courses are far better than many udemy paid courses

[@vincent3542]

Indeed!!

[@DaveGrayTeachesCode]

Thank you for the kind words, Jaydeep! 🙏 I am planning on a NextJS series this year. 💯 "Near future" is undecided but definitely this year!

[@MichaelBanet-uv9ug]

Hi Dave, Thank you so much for creating such wonderful tutorials. I have a question regarding learning CSS. I'm struggling with how to be productive in practicing CSS on my own in the real world. Could you provide guidance on effective methods for comprehension? Thank you!

[@mohamedtawous2941]

Excellent video Dave, really happy I found this. Question though, why did the fixed box stay where it was at 9:03 instead of in the top left corner of the inner box? I know you hadn’t put in the values for top and left yet, but I am just curious what the logic there was. I was thinking that it has something to do with the elements stacking on top of one another on the page, but that wouldn’t explain why the relative box stayed in the top left corner.

[@Window2015]

So whenever you use a position property and do not specify any value like top left bottom or Right then it will stay at the same place as it would normally be but it would go out of the document flow that is what I think is the logic behind that but if this is not let me know

[@robinheyer708]

Another great video, I really like the reminder of accessibility throughout your HTML & CSS videos! I was wondering about that absolute positioned element that gets moved -10000px. Will the screen reader read it when it gets to the position of the div in the HTML or are there other factors as well?

[@DaveGrayTeachesCode]

The screen reader will still read it even at that position. This is good for adding headings to the page for semantic HTML and screen readers but maybe not displaying them in your visible design.

[@ce9916]

Great video! What extension are you using to make the current CSS rule be highlighted when you focus inside it?

[@ce9916]

I hope he's not dead 🥺

[@ce9916]

Sure, sure sure, sure sure looks like it

[@ce9916]

Man, it sure looks pretty bad

[@ryanclarke5157]

Great series so far . I had a strange error that ive been banging my head last 40 minutes or so trying to figure out. So i was following along your video and then all of a sudden the browser stopped rendering the css linked to index.html. Assumed it was a href link issue but even more strangely i realised it was loading style.css but only the roboto link and font sizes. Couldn`t figure it out, far too inexperienced and Stack Overflow was of no help either. Anyway Great video. Very Helpful :)

[@DaveGrayTeachesCode]

Glad it helped! I hope you find the solution for the issue you are describing.

[@ryanclarke5157]

@@DaveGrayTeachesCode I did :)

[@Gyannea]

This is wonderful and seems so straight-forward, however, my sticky child component does not 'stick' as I scroll up.

[@saranya630]

To know about position properties in CSS, it's mandatory to watch this video to learn without any confusions or doubts :)) BEST 👍👍

[@DaveGrayTeachesCode]

Glad it was helpful!

[@9nikolov]

12:44 Accessibility with position: absolute [ALTERNATIVE APPROACH - not as widely supported by older browsers] .hide { position: absolute; clip-path: 0; }

[@uzairfarooq]

Hey Dave, one of my friends shared your playlist and honestly it is very helpful. Q) When I apply height:100vh on section, footer also taking the same height... what could be the reason please

[@DaveGrayTeachesCode]

Glad to hear that. I can only guess about your question. Sounds like your footer is a section. Link to my Discord in the video descriptions. Better for longer chats.

[@bensherlock2345]

Hi , Dave. Can I ask when this course can be finished?

[@DaveGrayTeachesCode]

Of course you can ask! 😀 I do not have an exact date, but I am completing one lesson per week for this playlist right now.

[@bensherlock2345]

​@@DaveGrayTeachesCode Thank you for your reply. I do enjoy your courses. It's the best course ever.

[@shineLouisShine]

Thanks for the video.. (1) 21:00 - For what purpose do you set the color to white..? (2) How come the scroll-behavior: smooth; does'nt work for me? (using Chrome)

[@DaveGrayTeachesCode]

1) If we put any font on the button instead of an emoji, it would stand out. You can omit if you want. 2) Something must be different from my code, but I can only guess about what. Compare your code to mine.

[@shineLouisShine]

@@DaveGrayTeachesCode 1) Obviously :) I just didn't understand the purpose of "painting" the font when the button has nothing but an icon on it. 2) Yes. I simply haven't noticed the nuance. I see it now :) Thanks!

[@Simpintopimpin]

My inner container and outer container aren't the same size as yours but i'm almost positive I put in the exact same rules and html as you. What could I be doing wrong? My inner container box is right on bottom line of the outer container. There's no padding and margin space in between them. But i'm almost positive I put in the exact same rules and html as you. Also in the first example my position sticky rule isn't working at all. I don't know what i'm doing wrong. Could our computers being different sizes effect the page lay out?

[@DaveGrayTeachesCode]

You can verify that your code is the same as mine by viewing the source code at the github link in the description. Our screen size differences *may* make a difference, but for something like the position sticky rule, it has to be a code issue.

[@fabrice9848]

What is the color property for in the .social class ?

[@DaveGrayTeachesCode]

MDN CSS Color: developer.mozilla.org/en-US/docs/Web/CSS/color

[@fabrice9848]

@@DaveGrayTeachesCode Thanks, but that was not my question 😆 I meant : what's the point of adding this property in this specific case ?

[@DaveGrayTeachesCode]

@@fabrice9848 ah I see - can you provide a timestamp so I can go directly to the spot in the video you are asking about?

[@fabrice9848]

@@DaveGrayTeachesCode kzbin.info/www/bejne/sKLKZXRsnJ56nKM

[@bnmbnm7278]

Hi. The 13th lesson starter code still not exist in the github...

[@DaveGrayTeachesCode]

Thank you for letting me know! I thought I had pushed that to Github already. I have it there now. Thanks again! 💯🙏

[@natnaelgetachew325]

how can i contact you sir?

[@DaveGrayTeachesCode]

Join my Discord linked at the top of my channel homepage.

[@nxshipon6470]

jossssssssssssssssssssssssssssssssssssssssssss sir love you sir

[@DaveGrayTeachesCode]

Thank you!

[@samopaul]

its a cool tutorial by donald Trump voice

[@DaveGrayTeachesCode]

I don't sound anything like him.