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

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

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

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

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

[@cyriljephery2662]

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

[@DaveGrayTeachesCode]

Thank you, Cyril! 💯

[@theonewhocode3117]

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

[@DaveGrayTeachesCode]

Glad to hear it helped!

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

[@ajaysan2765]

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

[@DaveGrayTeachesCode]

You're welcome!

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

[@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! 💯🚀

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

[@dipankarmaity1591]

your all class is very helpful for me.

[@DaveGrayTeachesCode]

Glad to hear that!

[@andygordon6880]

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

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

[@anupamshahi1156]

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

[@fabrice9848]

The scroll-behavior: smooth; was really cool.

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

[@brito22419]

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

[@DaveGrayTeachesCode]

Thank you!

[@fabrice9848]

Thank you Dave.

[@DaveGrayTeachesCode]

You're welcome!

[@vivekanand5900]

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

[@DaveGrayTeachesCode]

Glad to hear that!

[@danieljing9319]

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

[@DaveGrayTeachesCode]

Thank you, Daniel! 🙏

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

[@elvispontes4165]

Excelente as always. Thanks.

[@DaveGrayTeachesCode]

Thank you!

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

[@godwinmercy5606]

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

[@RocoSafreti]

Great video and series.

[@fikilekentane6982]

tnx Dave for excellent tuts 👌

[@ravisankar9122]

Thank you

[@letuslearnmore]

Great teacher

[@DaveGrayTeachesCode]

Thank you! 😃

[@iambrijeshtoo]

Thank you!

[@DaveGrayTeachesCode]

You're welcome!

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

[@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 :)

[@massihpoya3337]

great explanation thanks again

[@DaveGrayTeachesCode]

You are welcome, Massih! 💯

[@Gyannea]

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

[@andromilk2634]

So, if I understood correctly, sticky is a mix between static and fixed, with an element staying in the normal flow of the page as usual (static) until it reaches a certain position by us and when this happens, it becomes fixed. (Is this defined position by us always vis-a-vis the browser or it can be relative to some elements in the page?) Thanks

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

[@willyhorizont8672]

Thanks dave

[@DaveGrayTeachesCode]

You're welcome, Willy!

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

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

[@ce9916]

Maybe one day, he'll reply. I sure hope so

[@ce9916]

Man, this guy is quiet. What the mouse?

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

[@wirefred]

Thanks Sir

[@DaveGrayTeachesCode]

You're welcome, Mordecai!

[@علاء_الدين]

i'm facing a problem in the scroll-behavior, it doesn't work

[@Lostboysearchingforpeace]

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.

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

[@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! 💯🙏

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

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

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

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