The Forgotten CSS Position

hello everybody my name is Kyle and this is web dev simplified we make the web easy to understand and accessible for everyone in this video I'm going to be covering CSS deke position what it is and where you should be using it by going over two examples in depth where CSS sticky position makes sense to use let's get started now the first example that you can see here is where you have a web page with a header at the top you have some content inside of it and you want your header to stick to the top of your page as you scroll down as you can see right now the header does not stick to the page when we scroll down and the normal thought to fix this is to use the fixed position so we would select that navigation which we have a class 4 of main nav and then we would just set the position to fixed which forces the element to stay in a certain spot on the web page and we want it to be at the very top of the screen so we'll say top of zero so it'll stick to the very top of the screen if you say that and you should rolled out you see our header now it sticks to the top of our page well you'll notice that our content got pushed up and that's because this header no longer takes up space on our page so we need to also select our content here we're going to need to supply a margin on the top of which just say 30 pixels to push it back down to where it came from and this is how you would use fixed position in order to make this type of header and in this case fixed position is perfect but let's say you had a large section above your header for example we add in a class here we give it header large and we stayed that you now see that we have this picture at the top of our page and we want our navigation bar to come underneath of that page but still stick to the top of our page when we scroll down in order to do this we're going to use sticky position so let's remove these positions that we have here let's remove our margin top from our content and if we say that we see that we now have the header at the bottom of our image just like we want it but if we scroll down it no longer sticks to the top of our browser which is what we want in order to get around this we use sticky position so instead of our main now we'll put position sticky here sticky there we go and position sticky acts just like relative position when it's inside the browser so if we scroll you see it looks just like relative position and it works just like normal but the key here is if you supply a primer here for example top and we set it to zero as soon as the top of this is zero pixels away from the top of the screen it'll stick to the top of the screen and act like a fixed position element and then if it becomes farther away from the top of the screen than zero pixels it'll go back to being relatively positioned so if we save that and we scroll here you see it's relative and stays down there just like we want and as soon as the top of this element touches the top of our screen it becomes fixed position to the top of our screen and if we go back up you see just like we wanted to and the best part is is since it acts as a relative position element we no longer need to apply margin to the stuff that comes after our navigation so this is a great use for sticky positioning when you want to move an element that doesn't already start at the position you want to fix it at now let's look at another example where sticky positioning can be used inside of content that is smaller than the size of the screen it's open this up and live server here and we have a list right here of different elements so we have ABCD and all the way down and what we want is as we scroll through our list we want this a header to stay at the top of the page until we get to the B header and until we get to the C header and so on all the way down to B so we're not going to do that let's go into our list HTML here and we have our container we have a list right here and I have the header inside of it which is where we want to apply our positions to so we can use sticky position for this to select our list header I'm gonna give it a position here Oh sticky and we also want to stick to the top of the screen so we use top zero and that's all we need to do if we scroll down you'll see it sticks to the top of the page and stays there and then when B comes in B becomes the top and C and then D and so on and the reason that these elements stop becoming sticky when they hit the next element is because a sticky element only is fixed position while inside of its parent element so if we scroll down here you see that we have our header right here which is inside of a list group and the list group just goes to the bottom of the elements inside that list so ACORN in this example is the bottom of the list group and as soon as our list header gets to the very bottom of its parent for this group it no longer becomes fixed position which is exactly what we want so if we scroll down you see we hit B and B is the same way once it passes the last element C becomes the new sticky visited element in that place and D and so on and this is exactly where sticky position shines this is the reason that sticky position was created in order to create these dynamic scrolling elements inside of your page that aren't just fixed at a certain spot on your page at all times one thing to note about sticky position though is not all browsers currently support sticky Perdition only about 90% of browsers support it and that's only if you prefix it as well in order to prefix the element you used these different prefixes so we have WebKit sticky we have a most sticky ms sticky and Oh sticky and these just stand for the different browsers that we have so we have opera we have Microsoft we have Mozilla and so on the WebKit would be for Chrome and you just want to put all of these above the normal definition for sticky and this will increase your browser support up to that 90s percent because most browsers only support it with this prefix and only about 50% or so support it without the pre-sex currently also to get around those ten percent of browsers that don't support it at all even with the prefix what you want to do is use the add supports property for your CSS so we can go in here okay say add supports and we could just save position sticky and you would want to put all of these different prefixes inside of this as well inside of an org and in here we just want to select that list header again and we want to say position sticky top of zero and then instead of a normal list header here we want to use position:relative since that is what sticky essentially falls back to if it is not actually supported so if we do this now browsers that are not supported with sticky headers will just get a relative header just like normal but in browsers like my browser Chrome here that supports sticky position it'll now work exactly as we wanted to so I hope you guys learn something from this quick look into sticky position with CSS it's really a quite unique way to position element and incredibly useful when doing things such as this list view or this header view down here that normally you would need to use JavaScript to achieve before so if you guys enjoyed the video please make sure to leave a like below and let me know in the comments if you guys enjoyed this shorter version of me just going over a feature in CSS and if you guys did like this let me know down below what other features you want me to cover whether it be CSS JavaScript HTML whatever it doesn't really matter just let me know down below so thank you guys very much for watching have a good day

Channel: Web Dev Simplified

Views: 49,149

Rating: 4.9881516 out of 5

Keywords: webdevsimplified, css sticky positioning explained, css sticky position tutorial, css sticky, css sticky position, how to use sticky position, what is css sticky position, css positioning explained, css positioning tutorial, css positioning for beginners, can i use css sticky position, how to make a sticky navigation bar css, how to make a fixed navigation bar, how to position elements in css, sticky position in css, sticky position tutorial

Id: NzjU1GmKosQ

Length: 7min 27sec (447 seconds)

Published: Thu Oct 18 2018

Reddit Comments

[u/nickthemagicman]

Great article! I've been looking for this!

[u/kuriusOne]

Remembered this just yesterday when building a styleguide for a new client; such a handy declaration! Nice explanation of scenarios and using the new @supports 👍