CSS Positioning Tutorial - Relative vs. Absolute vs. Fixed vs. Sticky | Crash Course

right in this crash course we're going to be learning everything about CSS positioning we'll be talking about relative absolute fixed and even the new sticky position so come follow along and I hope you learn CSS positioning is one of those CSS things that's been around for quite some time but it's still in heavy use today so it's a really excellent skill and mists and really a necessity to learn if you're gonna be working on the web so don't forget to click the like and subscribe buttons down below share this content so we can continue to keep these tutorials rolling so we're gonna jump right into the slides here to get the basics of CSS out of the way now CSS positioning comes in four basic types so static you can see here is the default so all elements by default have a static CSS position and then we have relative we have absolute we have fixed and then last we have this new CSS position which is called sticky now sticky isn't supported in all web browsers a hundred percent so we'll look at that towards the end and I'll show you exactly where it is and isn't supported now whenever you're using CSS position you're always positioning your elements using these four key words either top right bottom or left so you're always moving an element based on its top right bottom or left position so these four key words are what you'll actually use in the CSS and you can use pixels you can use m's percentages any CSS unit of measure will work but you're always going to be working with these four CSS property names so here's a quick little sample of what I mean by offset whenever you're working with CSS positioning you're always offsetting from the key word you use so you can see here we're using the keyword top and what that means is it's going to be offset or pushed away from the top edge based on your value over here so you can see we're gonna be using 100 pixels here and if I was to declare this in CSS this box would move down 100 pixels or offset or away from the top edge 100 pixels so that's something very key to remember as we go through the rest of these slides remembering that that value is an offset value so let's go ahead and move over here and look at a couple of the values you can see here that I've got positive values here on the insides and then the negative values here are on the outsides and what I mean by that our positive values will offset inward and negative values will offset or push outward so if you use a positive 100 value assuming we're using the top key word it's going to push down or inward 100 pixels if you use a negative value it's going to push outward or up 100 pixels okay so that's the way that those positive and negative values work in CSS so let's take a look here at the relative position first so relative CSS positioning is positioned according to its self so it's original position that's where all of the movement is based off of so in this little sample here we're gonna see that let's assume we have a box here in our web browser and we're going to assign the position of relative you do this right in your CSS and then we're gonna say top 100 pixels so again try to think where you think this is going to move before I show you the example here so again it's gonna be offset from the top edge it's going to move in a positive direction because I'm using positive 100 pixels so this would move down 100 pixels from its original position where it normally would have appeared in the document flow that's where the box would now appear now in this second sample here you can see that we've moved the top value to a negative 100 pixels so again think where you think this box is going to move and you can see here in this instance that's going to offset negative 100 from the top where it's going to move up 100 pixels in this sample here so one more sample here in this sample we're using two different keywords so I'm setting both top to 100 and left to negative 100 so if we sort of imagine here from the top edge it should move down in this direction 100 pixels and from the left edge it should move negative or out 100 pixels so I would expect this box to move in this behavior so it's going to move left and down both so you can use two keywords as well now you wouldn't ever want to use let's say top and bottom at the same time because those are offsetting keywords and you can't say like top 100 and bottom 100 because they're trying to push in opposite directions and I'm pretty sure that would create a black hole in the universe that's how those are actually created so remember you're always gonna use top left or bottom right or something like that not two opposing sides and your keywords so let's go ahead and take a look here at a quick topic we need to understand which is called the document flow now whenever you're using CSS positioning you are modifying the normal document flow of a document so just as a quick refresher tags come in several different varieties but by default a lot of the tags are what we call block level tags so block level tags are like divs paragraphs lists over here meaning they occupy an entire block of space so these guys are taking up these entire horizontal lines even though this element down here is smaller than this it's not going to go up and sit next to this guy because they're block meaning they force each new element to be on its own block or line so that's kind of what block level tags look like now the next set of tags is called inline tags and inline tags are things like images links inputs and inline tags are the opposite of block they go you know like one two three they all follow in the same horizontal line and if there's not enough room they simply just rap down here to the next line and continue going so that's the way inline elements work now I should note that this is just the default behavior of these tags if I want an image tag to behave like a block I can just change that in CSS and change any x' any tags really between is an inline and block and inline block and all their various different types of display so the basics are inline and block and we have to understand that basic difference before we understand how CSS positioning modifies the document flow so let's look at this example with relative positioning so here we have three boxes you can see that we're setting the top to 500 and left to negative 500 so we're gonna take this box right here and it is going to move down five hundred and left- five hundred so it should appear somewhere over in here after this positioning context happens so let's go ahead and animate this so you can see sure enough that's where that box would reappear but notice that these two boxes two and three they don't move back up there's just an empty space all the way up here where that element used to exist if you will and what we need to take away from this is that relative positioning does not remove elements from the document flow so even though we visually move the element down here as far as these other tags and all the rest of your HTML are concerned it still exists right here so they're still gonna flow after that element as if it was still there that's what we mean by document flow so relative positioned elements do not modify the document flow visually they just simply move visually and the other elements appear where they normally would okay so that's with relative positioning now let's go ahead and take a look at how this works in absolute positioning so absolute positioned elements are positioned differently than relative elements they are positioned according to the nearest containing element so they're not positioned according to themselves or their original position they're positioned based on another element the containing element or the nearest parent element that itself has a position all right so let's take a look at this element next so in absolute positioning elements you're always working with two elements this inner element here is the element we're actually going to position this outer element is what we're considering the parent element here so there's always a parent element that comes into play with absolute positioning so let's assume that the parent has a position of relative now we don't actually have to move the parent as long as it's assigned a position then that's all that matters we can move it if we want but it's not required and then down here on our box we're going to give this a position of absolute and top 100 so again in this con text this box isn't gonna move down from its own top edge it's gonna move down from the parents top edge because the parent is the positioning context so in this example here we would expect this box to move down 100 pixels from this top edge right here of its parent so in this case if we were to move this box and animate this it would actually visually move up but that's because it's moving 100 pixels offset from the parent okay so that's how that works let's look at another sample here so the same thing here but now we're using two keywords so this in case we're using bottom of zero and right of zero so whenever we say zero we're saying move away from that edge zero pixels in other words that's gonna stick itself right on that edge so in this case what would happen is it would place itself right in the bottom right so whenever you use a keyword of right in absolute positioning it uses the parents right so in other words it uses the parents right for the positioning context and the child's right edge as well so in this case we're saying right zero so it's right edge would be offset zero pixels in other words stuck right on the edge and then we're saying bottom zero so the parents bottom and the child's bottom are gonna be offset zero as well so it sticks itself in the bottom right corner alright one more example here this one with a negative value so let's again see if you can think where this is going to move while I'm explaining here so bottom zero left negative 200 so again it's the parents element so it's gonna move zero pixels away from the bottom so I would expect it to get stuck down there and then it's going to move left negative 200 so it's gonna use the left edge of the parent and it's gonna move in a negative direction 200 so I would expect this guy you know to kind of sit out here somewhere so let's go ahead and animate this and sure enough it's gonna move over that way in some direction now I'm just making up these this is obviously isn't to scale 100 and 200 but that's how that's guys gonna move okay lastly here with the three main types is what we call absolute positioning oh sorry I'm getting ahead of myself lastly we're going to be talking about document flow with absolute positioning because it's different so you can see down here there's a little cheat here for you elements in absolute positioning are removed from the document flow so let's take a look here so here we have a position of five hundred so if I were to move this guy top 500 and left negative 500 remember this is from the parent so it's gonna move down from the parent 500 and it's going to move negative 500 over from the left so you know somewhere clear over here in your browser window now because this guy moved and we're in absolute positioning these two elements shift up they're gonna move up and occupy the space where that element used to exist and that is because this element right here was removed from the document flow so you can kind of think of this as far as divs 2 & 3 are concerned div number 1 doesn't even exist it's like it's not even there in the source code they would just go up and occupy the space where they would normally be laid out and that is because absolute positioning removes elements from the document flow now the third type is fixed positioning and fixed positioning is always fixed according to the viewport so it's positioning context is the browser window itself which we refer to as the viewport now in fixed positioning it works basically the exact same way absolute positioning works except the parent element is always the viewport so in this case if we were to save top 100 right 100 this is going to move down 100 pixels from the top edge and it's going to move this way 100 pixels from the right edge so I would expect this you know box to kind of sit over here so again as we animate this right it's going to move down 100 over 100 and that's where the element would be positioned another sample here if I were to say right 0 bottom 0 then this element is gonna move down to the bottom right right behind my head here so one important thing to remember with fixed positioning is that if you resize the browser window it moves with the browser window and it will sit in front of all the other content now let's take a look at how this works in the document flow so again just like absolute positioning fixed elements are removed from the document flow so if I was to take this div here and position it down at the bottom left using fixed positioning these other two elements would slide up and occupy the space where that element right here used to occupy just like absolute positioning okay the last one here is the sticky positioning context and this one's a little bit goofy it's fairly new but its positioning context is the containing element so it's kind of like absolute in this case where it's the containing element but only with certain conditions are met and then it sort of behaves like fixed positioning so it's kind of this weird hybrid between several and you can see here this is quoted from the Indian Doc's here it says it's treated as a relative positioned element until its containing block crosses a specific threshold so that's what I mean by conditions once that threshold is set its treated as stuck so it's kind of like fixed positioning at that point until meeting the opposite edge of its containing block now that kind of doesn't make a lot of sense the best way to understands to keep positioning in my opinion is just to look at an example so with sticky positioning it kind of works like this so if I was to set the position to sticky and then set top-20 pixels this element right here we're assuming is the element that I'm actually positioning what's gonna happen is assuming I have a scrolling context so assuming I can scroll so this would mean right this guy right here is set inside of something and there's a scrollbar over here on the right side and I'm scrolling up and down once this element right here gets to top so this is this outer box here is once it gets to top zero then it behaves as a sticky element so in this case it would move up to top zero so both elements would scroll up once this his top zero this guy becomes stuck and the other content would then slide underneath it and it stays in position like that so that's the way sticky elements work these are most often used for like sticky website headers where the entire header you've probably seen where you scroll down on a website and also in the header stays at the top of the browser window but the website slides underneath it that's a use case for using the sticky position okay as far as the document flow is concerned it behaves like relative until it's stuck and then it behaves like fixed so again in this case if I was scrolling it gets stuck and then all the stuff slides underneath it and then it behaves like fixed okay so the last thing we need to understand here before we look at some live code samples is Z index now Z index controls the stacking order of CSS elements so whenever you're moving things around and shifting things over one another you're gonna have some elements in front and some elements behind of other elements right and that creates a 3d plane or a Z index so we can sort of shift which elements appear in front or behind of the other elements so in this case right here you can see that blue has a Z index of 3 Green has a Z index of 1 and red has a C index of 2 it's pretty easy because the higher the number that means it's going to be on top of other elements so 3 is the highest so it's gonna be above that one one is the lowest so it's gonna appear below and then 2 is gonna be in the middle and that's pretty much how Z index works now in this next little sample here you can see I've just switched the numbers so here I have 1 2 and 3 since 3 is the highest here it's going to sit in front of the rest then this one and then this one and then on this one we just sort of reverse them so now this one is set to 1 this one's set to 2 and this one's set to 3 and this one sits in front of all the rest of them it should be noted here in this slide but you don't have to do 1 2 3 you can do 1 5 50 and notice that this is a unit of this number it's not 50 pixels it's just 50 as in a number and actually recommend you go with you give yourself a bit of a gap so you don't want to do one two three four because let's say later on I want to maybe put a div in the middle of all these well if I've done one two three four I've got a shift all of the numbers in order to get that where I want it to go so maybe better would be to use something like five ten and fifteen they're still gonna stack properly but then I have some extra numbers in between each of these if I want to at a later date you know set one does the index six or something to have it be positioned just right so that's the way the index works you can set that on any element you want to make things appear above and below other elements so we're gonna take a look at some live code here but before we do that I just want to give you one simple use case of maybe when you would want to use CSS positioning so let's say here we have a website I'm just gonna sketch a really quick and hit my microphone here on my sketch remove this other let's say we have a website that kind of looks like this maybe we have a header up at the top here and then we have our content down here and maybe I have a logo so the logo of the element right traditionally since right up here in the header but maybe I want my cool logo to overlap these two sections we can't really do that with CSS unless you use CSS positioning so in this case what I could do is I could take my logo remember my logo is gonna be in a box and I could use CSS positioning to move it down from the top edge of the header so color is kind of bright so in this case right I can set my logo up here and I could say maybe set a position of relative and I want to move it down from where it normally sits 200 pixels so then it would actually appear right there visually so that's how CSS positioning could be used so let's jump over to our code editor and look at a couple of live samples of code here and then we'll wrap up this tutorial okay so here I am inside a visual studio code which I'm using for my code editor and I'm going to show you just a couple quick samples that have to do with CSS positioning when I quickly cover the HTML here so you can see I've just got a simple div tag that's acting as my parent that's the yellow box here and I've got three children a red a blue and a green so I have a red and blue and a green and I haven't applied any CSS positioning at all to these elements this one right here is 500 by 500 each of these little boxes are 100 by 100 so this is just the normal way this would layout on a web page without any fancy positioning so let's take a look at the CSS file here you can see that the CSS file just has my parent and then all the children here so let's start out with relative CSS positioning so I'm going to apply this to this middle box here which is my blue box I'm actually going to reposition these so we can have them in the same order red blue green there we go so let's just apply here a position of relative so you have to assign a position and then I can say left 200 pixels so this should move right 200 pixels now you can see here there's still a gap between 1 and 3 because relative positioning does not remove itself from the document flow now I can actually do a negative value as well so I can do negative and I'm going to do 50 pixels just so you can see you can actually offset out of bounds so this is out you can't see it it's outside of the viewport area you can definitely move things out of bounds as well okay let's now switch this I'm gonna move this back to left actually let's go we're gonna go back to 200 pixels and save there and now I'm going to switch the positioning context here to absolute but remember whenever you're working with absolute positioning you need to come to the parent element and assign it a position as well so I'm just gonna make this guy relative now it's actually moved left 200 pixels from the left edge of the parent okay so that's how that works now in this sample here you really can't there didn't look like a whole lot moved but watch what happens when I switch this to a value like bottom so let's actually undo this so I'm gonna go back to relative positioning and instead of left let's say bottom 50 pixels and save so you can see in this example with relative positioning it moves up from its own edge 50 pixels but if I switch this now if I go give my parent a position of relative so I'm gonna signing my apparent two position and then I switch this position to absolute it's now going to use the parent bottom edge so watch what happens when I save here it now moves up 50 pixels from the bottom of the parent and also notice that the green div now shifted up and occupies this space where that blue div used to occupy because with absolute positioning elements I removed from the document flow alright last here let's go ahead and look at last of the three anyway let's go ahead and look at fixed positioning so I'm gonna take this blue guy and I'm gonna set it to a position of fixed remember a fixed positioning always uses the viewport down here so I'm gonna set that to bottom 50 and let's set it to right 50 as well so this will appear down here in the bottom right corner you actually can't see it because of the way this works so I'm going to turn on my inspect element and just go into responsive design mode here so we can see this and then I'm going to scroll my viewport it's clear down here there we go so this is simulating what would happen when a user resizes their browser window and what I want to illustrate here is that this always will be away 50/50 from the bottom right corner of the browser window regardless of how you resize it it'll always float on top of other elements so if I scroll the web page here that's always going to be in view 100% of the time it'll never not be in view because it's fixed positioned so that's how fixed positioning works and then let's do our third one which is or a fourth one which is the sticky and then we'll take a quick look at z-index so in this case let's go ahead and make let's make our blue div we're gonna change this back to not back to but instead we're going to change it to sticky and we're gonna set it to top zero pixels now in order to see this work I have to be able to scroll my content so to have a scrolling area so I'm gonna make sure my parent element has an overflow of auto that's gonna make sure that it Scrolls I'm gonna come over here to my CSS and we're just going to do a bunch of lorem ipsum text here so we'll just do a bunch of text and then we will probably just copy this paragraph a bunch of times here so 1 2 3 4 5 6 7 8 9 10 I don't know lots of them right so that I'm able to have a scrolling context over here now watch what happens so this is set to position sticky so as soon as it hits the where did we set that right here so as soon as it hits top of 0 pixels right that's when it becomes fixed or stuck to the top so as I scroll down here it's moving it's moving it's moving right at this point it's now top zero so it sticks there and now everything else scrolls underneath it and it will just stay there forever so it's kind of like fixed and absolute combined but only with that certain condition you can actually do this on multiple elements here so I can set my green Dave I'll just copy here and paste down into my green one the exact same thing and then refresh over here now the blue and will stick and then the green one will also stick so you can see I will scroll here and the blue sticks oops did I oh it's behind it so hope so this is actually kind of hard to see let's change this a little bit so I'm gonna grab a couple of paragraphs I'll just copy these out of here and paste them in between these two there we go let's actually paste some in between this one too this will be a little easier to see okay now note here in my CSS that both the blue have a position of sticky and green has a position of sticky both with top-20 so in this case as I scroll when the blue hits top zero it gets stuck now everything's sliding underneath it and when the green hits top zero it's stuck and then everything slides underneath it so you can have multiple elements and then you can sort of see they unstack in the same way if you just reverse the scroll they scroll back out so that's how position sticky works so let's now just look at the Z index and then we will be done so I'll delete these paragraphs here so that we're just left with our three divs here and let's just move these all with absolute positioning so we're going to set the position to absolute whoops fill that in correctly absolute on all of them so we'll set that one absolute red green and blue are all going to be absolute and then let's move this one at I don't know maybe top fifty pixels and left fifty pixels and I'm gonna make each one of these offset themselves by fifty pixels so this one down here is going to be one hundred and one hundred whoops I don't know what the key I just did and this one down here will be 150 and 150 okay so when I save here you can see what I mean where they're all overlapping one another so let's say for some reason I want red to be on top of blue well I can just come into red and I can give it a Z dash index I'm just gonna pick a random number here of fifty and save and you can see it now pops ahead if I want blue to be on top of red it just has to be anything above 50 so let's come back over to blue and I can set this guy to have a z-index of 51 just to illustrate just one number higher will work and now it pops back in front of red and you can just change the order of any of those elements just make sure they have the higher number than the previous element and they will pop in front so that is everything you need to know about CSS positioning in about a thirty minute video so I hope you learned a lot don't forget to thumbs up subscribe and we will see you in the next one [Music] you

Channel: FollowAndrew

Views: 17,182

Rating: 4.9721394 out of 5

Keywords: css positioning, css position tutorial, relative vs absolute, css, tutorial, z-index

Id: UO8ed-JB4So

Length: 28min 36sec (1716 seconds)

Published: Tue Nov 12 2019