 Hi there my friend and friends. Somehow I've made over 700 videos here on YouTube, most of them about CSS, and I haven't made a just let's cover everything about positioning video yet. I mean I've looked at position relative in absolute, I've explored different things with position sticky, I've probably touched on position fixed at one point, but I haven't done sort of a crash course look at all of them to compare them and look at the differences and just understand how all of them work in one single video which seems like a huge oversight, so we're here to fix that oversight today. And this is going to be a deep dive so we're going to be looking at position static, position relative, position absolute, position fixed, and position sticky, and we're not just going to do a brief covering of what each one of them does, but we're going to be looking at how they actually work when we're dealing with actual content on the page and not silly examples. We're going to see how they influence other things on the page when we put it on one element, what happens to the other stuff around it, and how we can harness each one, how we might actually want to use any of these within actual like real examples of stuff, and we'll also talk about some of the gotchas that can come up along the way with each one of them as well. So if that sounds good, well let's jump right into it and we're going to be doing that by looking at this demo that I have right here. We're going to be playing around with this a little bit where you can see I have this main area that's set up here or we have a header across the top actually a main area and of course this little sidebar thing that's right here. We're going to be playing with all these different pieces. And the first thing we're going to be doing is talking about let's just go on this page title here just so we can see what we're working with. So I'm going to select that with a page title class and let's give it a background color just to make it stand off a little bit. We're going to say we'll do a Rebecca purple so we can see it and maybe a color of white on there. There we go. It's right there and the first thing we're going to look at is a position of static and position static. You don't really see use too often just because this is the default, right? So we don't normally have to bother declaring a position of static on something. The only time that this might actually come up is if you have a different position and then you know maybe you used a position absolute or something like that and then you're using a media query and you need it to go back to the default behavior, then we can declare a position static but it's really not too often that you'll actually see this because it just means things are in the regular flow and it works. You scroll the page, the content scrolls, everything works the way you'd expect it to if you never declared anything and that also means things like you know top one rem won't do anything or I could say top you know 50 pixels or whatever it is the top, the bottom, the left, the right properties they don't do anything. We also have zed index that's not going to do anything. This is just we're in default land and so yeah that's position statics the nice and easy one. Where things get a little bit different is when we come in with position relative and position relative if I hit save now nothing's going to change. It seems to be exactly the same but there is a big difference and actually just to show us I think it's going to highlight a little bit better how this works I'm going to switch from the h1 that I had my page title here we're going to switch over to this text down here which is my article title that's right there my h2 of the article title so let's come in my selector and let's just change the page title to article title and we're going to switch things over so now this has the purple on it nothing too fancy yet and again if I take this position relative off nothing changes it's going to behave exactly the same way I can put that back on we haven't made a change but now if I come in and I say top 100 pixels it's actually going to influence where it is on the page and let's also add a left of 100 pixels in here as well and what this is doing is what we're moving it down by 100 pixels and we're moving it to the left 100 pixels from where it was originally positioned in the regular flow you know where did it start when we had no positioning on it now we're moving it 100 pixels down and 100 pixels over the important thing with position relative though and we are using our top and our left is you'll notice that it's leaving that big empty space there and we're actually going on top of other content so we're visually moving it but the other content isn't really aware that it's been taken out of the flow and that we've moved it around so the original space is always maintained and it's as often if you need some overlapping content sometimes this is a way that we can do it where you just need to like shift something up for visual purposes but it's not too often that we actually see any of this used there are a few other reasons we'll use position relative but one important thing is it also makes zindex come into play so we can throw a zindex on there and we're going to circle back to zindex in a little bit that it just means now we can start sort of stacking content and reordering things and just as an example you can see this is on top of my sidebar right here so I guess we can bring that into play by coming down and that's my aside that's right here so I can go and select my aside so we do that aside and so I'm going to do a position of relative so we open up the world of zindex and then I'm going to say that this has a zindex of two on there and it's going to come because this number on this zindex is bigger than this zindex you can see that that's now coming to front so we open up this world of layering there's a lot more this is zindex is the world of stacking context and not positioning so I don't want to go too deep into it but it is important to know that when we use things like position relative or fixed and all of that that we're opening up that world of being able to change the order of things but it can get a little bit more complex but at a simple level I think that's easy enough to understand how that's working so let's remove that because we don't really need that on that little sidebar for now and the next thing we're going to look at now because that's basically how relative works there is another thing with it that we're going to circle back to but and it's coming up soon but the next one we're going to look at is position absolute and you're going to see a very big difference when I do position absolute see how all of the content just moved and the reason that this happened is when we use a position of absolute we're pulling it out of the flow of the document and unlike relative where it sort of reserved that space where it originally lived even when we move stuff as soon as I do a position absolute even if I don't have a top and a left on things it's pulled out of the flow and the rest of the content pretends it's not actually there it's it's this new world that it's living in and everything else is completely ignoring it you can see it's even like the size of it's completely changed and everything it's not even respecting the width of that you know the the main content that it was in before it's now taking up a lot of room the other thing that's different is when I have my top and my left here this top and left are no longer relative to where it was originally in the flow so you'll notice here actually let's just take off the left I mean if we do a top of zero it's going to go all the way to the top of the page now I have some margin on there so let's just say margin of zero so we get rid of all the space and we can see that it's touching the top of the the viewport now and I said I have some margin on there I never put any margin but all of you know headings and paragraphs they all have a default margin top and bottom so I'm just removing that so my top of zero is actually touching the top of the viewport and that's very important to know is when we use position absolute like now if I say bottom of zero it's going to the bottom and you can see it's there at the bottom now it's not the bottom of the page this top the bottom the left and the right they're all relative to the nearest containing block which by default is going to be your viewport so a bottom of zero is the bottom where the viewport ends but then if I scroll it scrolls along and scrolls out of the page with it so it still acts you know as far as scrolling and like all of that goes it still acts like a regular element but it's pulled out of the flow and I can sort of position it anywhere I want so I could say bottom of zero then I could say left of 100 pixels and a right of 100 pixels and I know it's under my head a little bit so let's get myself out of the way but now I have 100 pixels on the left 100 pixels on the right and then I'm at a bottom maybe of I don't know 100 pixels off the bottom as well and then you can see it's created that gap there at the bottom and again that's before I scroll relative to the viewport now I keep saying relative to the viewport but I mentioned that containing block word before and the reason I mentioned that was right now this article title is living inside of this article with sidebar so let's grab that article with sidebar and we're going to do a bring that in as my selector and then we're going to do a position of relative on here relative and this is going to disappear it's gone and that's because this has now become the new containing block and this is another I mentioned we are going to come back to relative and this is why because position relative not only is it used for positioning things but as soon as a parent or an ancestor element has a position on it other than static so other than the default so it could be a fixed it could be a sticky it could be an absolute it could be a relative any of those positioning things declared on anything because this isn't the direct parent it's another level deep that becomes the containing block instead of the viewport so now if we go all the way down and that's because it's not the very bottom of the page just because I had more content I have a second article down here so the end of this article so where this article is ending is where this is and you can see this is the title for the next one so we're 100 pixels up 100 pixels to the left and 100 pixels to the right of this article here and you know what let's make it easier to see we'll put a border of five pixels solid red on there just so we can actually see what we're looking at so we have 100 pixels from the bottom from the left and from the right so if I came back up and we said here instead of bottom this is top it's not going to be top of the viewport it's going to be top 100 pixels from this red border that we see there because it's now looking at the article title as its parent and usually with position absolute this is the type of thing that you're actually going to be doing it's very rare that you want to position absolute element positioned absolute to the entire viewport it can become very cumbersome especially if you're getting into like trying to make a responsive design or something like that we don't want to create a layout using positioning usually it's when we need a certain element usually for decorational purposes or something but we need something very specific in a very specific place but we want that relative to another element so we can control the positioning of that other element and that's going to influence where like our sub element is if that makes sense so I would say like in general position absolute is a bit of a last resort it's not something you'd want to use on a regular basis but if you would want to see a video where I do talk about position absolute and using it to create a responsive layout or within a responsive layout to avoid the pitfalls you can run into when using it there should be a card popping up and I'll put a link in the description as well for a video that looks at that it's a bit more of a practical way I guess to be using position absolute but in general avoid it unless you really need it I think that's the best general rule you know when you need to pull something out of the flow because that has a very big impact and generally we want to avoid doing that but again there are use cases where it can be important but think everything else you've tried grid you've tried flex all of these things aren't working okay I need this one thing to go in this one very specific place that's out of the flow then we come in and we use position absolute and another thing that's important with position absolute is if normally we're putting things they're block level elements so let's just take all of these off for a second and you'll notice that the element if I take off the position absolute here the element is a block level element so it's going to take up the width of the area that it's inside of if something is actually it's just we're going to make the text shorter here because it's going to highlight better what's happening so we can come here and let's just do we need we need is our new title and so here we have we need by itself but it's a block level element so by default even though the text is short it's taking up a lot of room and what we're going to do now is on this we need that's you know we can come here and let's do a position of absolute and you're going to see that it also gets a lot smaller just because position absolute elements they're not really block level elements anymore they're pulled out of the flow and they're going to match the size of the content that is inside of them assuming there's no wrapping going on if they're too long they will still wrap around as we saw earlier but just to say like this is one of those important differences that does happen the elements do shrink down so sometimes if you're not expecting that just it can be a little bit awkward so just letting you know that that does happen and then of course you can add width and height to these if you need them width is 50 percent 50 percent of what 50 percent of its containing block so as soon as we do this position absolute everything is all the top bottom left right width height all of those things are about the containing block that it is inside of which we're generally doing with a position relative on one of the ancestors but again this could be any position other than static so if I turn off the position relative here the containing block goes back to the viewport you can see the width is actually slightly changed no though not very much but now we're looking at the entire viewport instead of at the red box the other thing with position absolute that I didn't mention is that index does still work so we can still layer things up and down if we need to but again I don't want to go too far into the world of zindex in this video I just want to talk more about positioning and for this next one actually we're going to let's just comment all of this out we're going to move our attention over to our sidebar over here because I want to look at position fixed and position sticky now and these ones are kind of weird position fixed is the original one we had we could also we'll look at doing this actually we'll start with our our header and then we'll move on to the sidebar and so let's go and select that we're going to select the primary header and on there I'm going to say that this has a position of fixed and there's some similarities with the position of fixed and a position of absolute and one of them you can see right now is that just like position absolute when we did it on the we need it shrunk down to fit the content the same thing happens when we use position fixed so my primary header was a display block before so it was just automatically taking up all the room and when I did a position of fixed it shrinks all the way back down and it breaks things so the first thing we want to do is then bring back the width of 100 to make it take up the full width that we originally had uh interestingly instead of a width 100 here you could just say that it has a left of zero and a right of zero and that would also work um you can combine width you know you could give a left and right of zero to give it that space and give it a smaller width as well it gets into like a little bit of the fringes with that there's cool stuff you can do with it but it's a little bit um it's you know it's not the beginner friendly stuff I don't and I don't want to get into confusing situations so just either one of those will work and give you the full width you want of course we're not right up against the top of the page anymore either so we can come in here and say we have a top of zero and it's going to move it um up to the top of the page as well and just like when we are using position absolute there's more than one similarity you can see the other content is now ignoring it like it's not on the page and it's moved up into the area uh where that used to be because this title that is right here that we can't read doesn't know that that position fixed thing is there basically it's going it doesn't see it so it just fills up into that space and the big thing that position fixed as is this where when I scroll it's fixed to the viewport and this can be very useful for creating things that are fixed to the viewport and that scroll along with you there is obviously a downside where you get these types of things that happen and this used to be very hard to solve or not hard to solve but annoying to solve we had to add like padding back to the page or margin top to the page that matched the height of your navigation so that content wouldn't go underneath it like this we're going to see there's easier solutions now um but yeah position fixed in terms of headers I wouldn't really use it for that anymore uh the one thing maybe is like know those social sharing things you get on wordpress sites and like blogs and stuff if you really need to have those your client really wants it um you're probably getting a widget that does it automatically for a wordpress site but something that fixes it to the viewport so as you're scrolling around it never moves it could also be one of those scroll to top buttons that you have so when you scroll down you have a button that's sort of bottom left you click it it brings you back up to the top of the page something that just stays with the viewport no matter what's going on the important thing with position fixed is it's always fixed to the viewport there are times where that's not actually the case but almost every time you use it you'll have it as something that is fixed to the viewport itself uh and you're not changing the containing block so as an example let's change this uh we'll take these off for a second and we're going to move this onto the aside which is this guy here that we were looking at before and you can see it's position fixed and I've sort of broke my entire layout by doing that because this now that was using for the rest of my layout doesn't see it anymore so the sidebar is basically vanished this is position fixed so it's come out into its own flow and it scrolls along with the page but I just wanted to show that like even though we have a containing block that's this red box that's going all the way around right because that has oh we took off the position relative we'll put it back on there just to show you that it doesn't do anything so now if we put this back on we are going to be all the way at the top of the page we're escaping out of the containing block and if you do if you're thinking I need something that's fixed but within another element again there are weird sort of hacky ways that you can make a fixed element actually get stuck inside of something but it's also generally going to make you lose that fixed thing where it scrolls along with the page like this so yeah you generally want to avoid that type of thing position fixed you definitely don't want it for regular content like we have here it's really used for very small things that you just need that never move and they're always locked into that one spot as the person scrolls and it's just always there we're going to switch this back on over to my primary header though because what I want to look at now is the alternative to fixed which is sticky and sticky solved so many of our problems the first one being look at that we've gotten our this is no longer hiding underneath that and sticky is this weird like middle ground type positioning thing we have where until the element sticks and we're going to explore more what I mean by sticks but until the element sticks it's a regular block level element basically so it's just going to it's going to live in the flow it's going to behave exactly how it was if we had no position on there whatsoever so it's like we never declared anything but as soon as it sticks then it turns into a fixed element and you can see actually it's going below everything else so it's come in here once again we have zindex same with the position fixed we have a zindex so I can do just a higher zindex to make sure it's not below everything else because that's kind of awkward and now you can see it's going in front of my other content and so we have the navigation stuck to the top of the page that's not really awkward because we're not having to worry about content going underneath the other time this can actually be kind of interesting is sometimes you have these things right you have like a hero section and then you have the navigation after so here I'm just going to throw in an h1 you know hello world something like that and we have my dot hero is going to have a height of 70 viewport height let's just say so it's really big and we have the navigation down here usually there's a big image there's other stuff going on but why this is cool is remember I said that it's right it's a scrolls like it's a regular element until it sticks so that's exactly what's happening you have your big hero area here with a nice big image it looks really cool then you get to your navigation and your navigation just sticks and it's awesome it works really really well now just importantly here the top here is really important and there's ways of using bottom as well but the bottom thing is kind of funky and how it works but let's just start with the top here and do a hundred pixels from the top and this is just how far away from the viewport will it be when it sticks so when it's a hundred pixels from the top it will stick this could be technically a negative value as well and all these can can use negative values and that just means that it's going to be like 10 pixels up so we're actually like losing part of it I'll do like 25 here just so we actually see that it's getting lost a little bit and I wouldn't really do something like that because it's kind of weird maybe you have a use case for that type of thing though but just on a navigation if you really need that sticky header you know even if it's you know I'm doing it again we have this set up but even without that hero area to me it's it's worth doing if you need a sticky header instead of using position fix just because it means we don't have to worry about the content after there is a thing with position sticky though that's kind of weird so I'm going to take this one off I'm going to go back to our side and this is one of those problems people run into in one of those gotchas so let's do a position sticky and we're going to say a top of zero and with position sticky it doesn't revert it doesn't like shrink down the way the fixed in the absolute did so I didn't really need the left and the right here it wasn't it wasn't achieving anything you're generally just saying either stick to the top or bottom and 99 percent of the time it will be the top but when I do this you're going to see it's not going to stick I'm going but I have a position sticky I have my top zero why is it not sticking to the top of my viewport and the reason that's happening is here in my article with sidebar if we go and find it which is way up because I was hiding it away it's using a display of flex and when we use a display of flex by default the elements have a align items of stretch on them so what that align items of stretch is doing if we come back down here if I give this a background color of let's just say steel blue for now so it's nothing too bright we're going to see that it goes all the way down to the bottom so I can't really stick to you know it is stuck to the top but that's because it doesn't have it it can't scroll down because then this would be like overflowing out the bottom of its containing block and that's something that it's not going to do so if you do have this setup as a flex or grid item and you're trying to use position sticky you might have to do an align self start just to make sure that the elements height it we're not stretching all the way down that it's only the height of itself and now what's going to happen is it's going to stick to when it hits that top of zero and it's going to stick to the viewport but one thing with position sticky unlike position fixed is items will not escape out of their containing block so see when it gets to the bottom of that red box it's sticking in there and it's staying with it so that is one thing it's really important to know and when I'm saying actually with containing block in this case if I take off the position of relative here it's not going to change that behavior so once again if I scroll down now let's just make this a bit narrower so wider I should say we have a bit more scrolling room there or actually you know what I'm going to do is really fast bear with me just take these three paragraphs and duplicate them so we have more content to scroll and there we go so now when I get to the bottom of the page it's still scrolling off so position fixed is less to do with the containing block itself and just looking at the parent so if the parent is the viewport like it was here or the body I should say then that's your navigation will just stick with the viewport in general but if you have other elements that are inside of something they cannot escape outside of that element so if they're you know they're it's in this div that it's part of it's not going to get out of there so it sticks to the top it will stay with it and then scroll off and of course you can do some really cool stuff with that that's a really fun effect I find to be able to do things like that now a few really important things just before we finished this video off I was talking about containing blocks being set up when we were coming in and changing the position of a parent right who I said that if an element had a position of relative it becomes the containing block or you know a position of anything other than static and that is true but there are other other things they can cause containing blocks to be created to and sometimes to you know it's an unintended thing that you don't really want to have happen and this is some of those gotchas that can come up they're not too often but they're really frustrating when they do happen so what we're going to do just to sort of illustrate this a little bit is let's make this a position of absolute just so we have something to work with and it's absolute and it's in the top here and let's just say that it has a width of 10 or I don't know 20 percent 25 percent just so it's less wide than it was but maybe I want that to be on the entire viewport so I don't have a position of relative on here and I have that set up and it's exactly where I want it to be and it's not perfect maybe we'll also say that this has a left of zero I don't know why this isn't a realistic situation but I just want to highlight these types of things that can happen so you can see it's broken outside of that red box because I don't have the position of relative on the article with sidebar but there's other things they can do it like if I had a filter on here and so I don't I wouldn't necessarily do a grayscale on this but say we had a filter on the the parent it's made everything grayscale but it's also turned it back into being a containing block and this is stuck within that area and this doesn't only happen with filter it also happens with transforms and perspective so if you're doing like an animation and I've definitely seen this happen where somebody puts an animation on something like a hover effect so you hover and then it moves and it's positioned one way and as soon as you hover the child actually like jumps and moves because all of a sudden as soon as that starts transitioning it becomes a containing block but it wasn't before and it can be really frustrating the other thing is if you are using something like container queries and other stuff like that you have to use a container type you can also contain layouts and if you're using a backdrop filter of blur as well so there's a few like weird gotchas every now and then but just know that if you're trying to do something and it can it's not behaving the way you think of there might be something strange creating a containing block you probably don't need to worry about it most of the time but it's one of those things that like a filter on something just mucks you up and you get really frustrated so I just I do want to throw that out there and actually this one's one of those weird ones where even if this was a position of fixed you'll notice that it doesn't escape out and it doesn't scroll at all it acts basically like a position of absolute and filters one of those weird things that can break a position of fixed so I do want to throw that out there so that can be really really annoying that that happens but usually if something's position fixed it doesn't have to be nested in anywhere because it's really not related to that other content if it's fixed to the viewport it's just sort of a general thing so usually in those situations the solution is just to move it outside of whatever is causing the problem and then you get your position fixed coming back so there we have it bit of a crash course quickly going over all of them I hope you did enjoy this if you do want those practical ways of using position absolute but keeping things responsive and you want to watch that video it is right here for your viewing pleasure and with that I would like to thank my neighbors of awesome whore Johnny Tim Simon Michael Andrew and web on demand as well as all my other patrons through their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome