CSS position deep dive

Key Takeaways

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 and absolute I've explor different things with position sticky I've probably touched on position fixed at one point uh 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 with in actual like real examples of of stuff and we'll also talk about some of the gas 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 uh we're going to be playing around with this a little bit um where you can see I have this main area that's set up uh here or we have a header across the top actually a main area and of course this little uh sidebar um thing that's right here and 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 uh 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 um 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 used too often just because this is the default right so we don't normally have to bother declaring a position of static on something uh 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 could declare a position static but it's really not too often they'll actually see this because it just means things are in the regular flow and it works you scroll the page the content scroll everything works the way you'd expect it to uh 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 Z 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 uh 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 uh 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 uh 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 uh and again if I take this position relative off nothing changes it's going to behave exactly the same way and 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 well 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 when 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 this is often if you need some overlapping content sometimes this is a way that we can do it where we just need to like shift something up for visual purposes uh 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 Zed index come into play so we can throw a z index on there we're going to circle back to zed index in a little bit um but it just means now we can start sort of stacking content and and reordering things uh and just as an example you can see this is on top of my sidebar right here uh so I guess we can bring that into play by coming down and that's my side that's right here so I can go and select my aside so we can do that aside and so I'm going to do a position of relative so we open up the world of Zed index and then I'm going to say that this has a zed index of two on there and it's going to come because this number on this Zed index is bigger than this Z index you can see that that's now come in front so we open up this world of layering uh there's a lot more this is Zed index 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 ative or fixed and all of that that we're opening up that world of being able to change the order of things uh 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 cuz 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 um 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 uh 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 uh I'm 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 uh um 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 now 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 uh 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 um and then I'm at a bottom maybe of I don't know 100 pixels off the bottom as well uh and then you can see it's created that Gap there uh at the bottom and again that's before I scroll relative to the viewport now I keep saying relative to the viewport uh 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 uh 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 were going to come back to relative and this is why uh 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 any because this isn't the direct parent it's another level deep uh that becomes the containing block instead of the viewport so now if we go all the way down uh and that's because it's not the very bottom of the page just cuz I had more cont 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 let's make it easier to see we'll put a border of five pixels solid red on there just so we can actually uh see what we're looking at so we have 100 pixels from the bottom from the left and from the right so if I can 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 uh 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 uh 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 um to avoid the pitfalls you can run into when using it uh there should be a card popping up and I'll put a link in the description as well um for a video that looks at that um 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 the best uh 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 um 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 uh to go in this one very specific place that's out of the flow then we come in and we use position absolute now another thing that's important with position absolute um is normally we're putting things they're Block Level elements so let's just take all of these off for a second um 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 take up the the width of the area that it's inside of um if something is or actually let just we're going to make the text shorter here cuz 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 um 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 uh and let's do a position of absolute and you're going to see that it also gets a lot smaller uh 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 um 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 um and then of course you can add with and height to these if you need them width is 50% 50% of what 50% 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 uh that I didn't mention is that index does still work so we can still layer things up and down if we need to uh but again I don't want to go too far into the World of Z index in this video I just want to talk more about positioning uh and for this next one actually we're going to let's just comment all of this out uh and 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 um position fixed is the original one we had uh 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 so 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 um position of fixed and uh a position of absolute and one of them you can see right now uh 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 to 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 withth 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 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 uh 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 fix 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 fix does 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 uh 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 POS 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 that it never moves um 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 asside which is this guy here that we were looking at before and you can see its position fixed and I sort of broke my entire layout by doing that because this now that I 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 CU 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 uh 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 uh 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 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 let's come in here once again we have Z index same with the position position fixed we have a z index um so I can do just a higher Z index to make sure it's not below everything else cuz that's kind of awkward and now you can see it's going in front of my other content um and so we have the navigation stuck to the top of the page that's not really awkward cuz 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 uh I'm just going to throw in an H1 you know hello world something like that and we have my 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 it's 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 in how it works um but let's just start with the top here and do a 100 pixels from the top and this is just how far away from the viewport will it be when it sticks so when it's 100 pixels from the top it will stick this could be technically a negative value as well and all these can can can use negative values um 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 um just so we actually see that it's getting lost a little bit and I wouldn't really do something like that cuz it's kind of weird maybe you have a use case for that type of thing though but uh just on a navigation if you really need that sticky header um you know even if it's you know I'm doing it again we have this set up but even without that hero area uh to me it's it's worth doing if you need a sticky header instead of using position fix just cuz 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 and we're going to go back to our side and this is one of those problems people run into and one of those gotas uh 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 and the absolute did so I didn't really need the left and the right here um it wasn't it wasn't achieving anything you're generally just saying either stick to the top or bottom and 99% of the time it will be the top but when I do this you're going to see it's not going to stick and 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 uh 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 it can't really stick to you know it is stuck to the top but that's because it doesn't have it can't scroll down because then this would be like overflowing out the bottom of its containing block and that's something something that it's not going to do so if you do have this set up as a flex or grid item and you're trying to use position sticky you might have to do an align self of start just to make sure that the element's 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 that'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 uh so once again if I scroll down let's just make this a bit narrower so uh wider I should say we have a bit more scrolling room there um or actually you know what I'm going to do is really fast bear with me let's just take these three paragraphs and duplicate them so we have more content to scroll 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 um 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 there you know there 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 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 uh to be able to do things like that now a few really important things just before uh we we we finish this video off I was talking about containing blocks um being set up when we were coming in and changing the position of a parent right so 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 things that can cause containing blocks to be created too and sometimes to you know it's an unintended um thing that you don't really want to have happen uh and this is some of those gotas 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 um 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% 25% 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 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 that 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 uh 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 uh the other thing is if you are using something like container queries um and other stuff like that you have to use a container type um you can also contain layouts and if you're using a backdrop filter of blur as well so there's a few like weird gotas 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 uh 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 uh so I just I do want to throw that out there uh and actually this one's one of those weird ones where even if this was a position of fixed um 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 filter is 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 positioned 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 uh 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 uh I hope you did enjoy this if you do want those practical ways of using position absolute but keeping things responsive uh you want to watch that video it is right here for viewing pleasure and with that I would like to thank my neers of awesome horror Johnny Tim Simon Michael Andrew and web on demand as well as all my other patrons or 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