CSS Position Tutorial | Learn CSS For Beginners

hello everybody welcome to another tutorial today we're gonna cover positioning in CSS which can be a daunting topic I know when I first started learning CSS it was so confusing for so long so hopefully this was gonna make everything clear if you already know CSS hopefully you can learn a trick or two because your it can be tricky again even if you work a lot with CSS so let's get started there are five positions let's start with the first one the first one is position static okay so to demonstrate that I'm just gonna add a h1 here we're gonna say hello okay and we're gonna add another one h1 and we're gonna say static so our content flows normally okay this is how HTML flows from top to bottom okay so the more content we add it just comes one content and then it goes below okay so whatever we add here this is gonna go below here okay and position static basically is the default so if we select h1 here and we're gonna add position static nothing's gonna happen okay this is the default property that all HTML elements come with and it just is the normal flow of HTML okay so is that it does nothing so you don't really need to worry about it but I thought I'd show you okay so our second one is position:relative we're gonna do a box because we're gonna transition into something different so we're gonna do a box here and we're gonna do two items in it so a box with a class a div with a class of box and two items here with the class of item 1 item 2 all right so let's style this box a bit okay so we're gonna add a width of 500 pixels a height of 500 pixels let's just add a background let's add a border to this okay border of 5 pixels solid black okay all right there we go so you can see it perfectly now good alright so we have this box and let's add some style to these items okay so open one item - I'm gonna sell a select both of these actually so I can add a width of 200 and a height of 200 ok so now we can individually and a color to these so I didn't want to repeat the width and height basically that's why I added them I selected both of them so I have a color here selected so let's go with this one and I have another one here item two okay is let me copy paste this really quickly all right copy close this one and these are actually quite big let's go one hundred should be fine all right there we go one hundred so for this one the second one we're gonna add this one you know what I'm actually not happy with this I want to make it bigger we're clear there we go okay now it's visually clear okay so let's go with this one okay this item right here if we add position relative to this like this nothing's gonna happen but what we have now is access to four different properties which is top bottom left and right okay these are the four properties that we have access to but what we can do is move this item anywhere we want based on its original position okay so here this item if I move it left to 20 pixels it's gonna move from its original position 20 pixels okay if we move it top 50 pixels it's gonna move it from our top position down 50 pixels all right so that's all it does it takes the element from its original position and you can move it anywhere anywhere you want so this is great if you want to do some kind of animation maybe you want this to transition in so if we add a right of 100 to this all right and we always know that if I write the zero that's our original position so if we animate this down like this we always gonna know when this goes back to zero it's always gonna end up here we also have position:absolute here now this is gonna go crazy here but here with position:absolute if we add bottom of zero pixels it's gonna appear down here which is kind of weird right it's gonna jump out of this box it doesn't care about the box it's gonna be zero pixels away from the bottom okay so it's gonna be stuck there on the bottom and let me just add some content here additional content you can ignore this I apologize so just add some content below okay so it doesn't really care that that content is there but what if we want this to be positioned relative to this box okay so maybe I wanted this to be stuck here down there in the box well remember what we said we said maybe one this positioned relative to this box so that's exactly what we have to do we have to go back to our box here and if we have position relative to this then it's gonna be stuck in that box okay so the parent that you give the position relative to that's what's gonna take it effect okay if we want to move it to the right all we have to do is add a right of zero pixels and then it's gonna be at the bottom right if we add top here it's gonna be on top right and there we go so it doesn't matter we can make this box bigger it's always gonna be stuck there as you can see it's always gonna be relative to this box and it's always going to be top right zero here as you can see so that's position:absolute there for you always remember to add a position relative to the parent container that you want it to be so if you have a big let's say you have a big Jumbotron or something and you have an image and you want to Center your text or something well you can add a position relative to that big box okay to that big image or whatever you want and then you can add a position:absolute to the text and then you can easily position it where you want on the screen so here in our item one if we add position fixed this is our fourth one we need to specify again a top or a left bottom or one of those elements because right now as you can see it's there so if we add the left of let's go a left of 50 pixels okay so it's gonna be left here 50 pixels space from the viewport okay this one doesn't keep our container in mind it doesn't keep anything in mind it just takes your monitor screen okay your viewports your whole screen and it's gonna place it relative to the relative to that okay so that's all it does this is great if you have a button or something to go back to the top or something because this is always always as you can see it doesn't matter if we scroll whatever we do this is always gonna be stuck there to our viewports okay it doesn't matter what we have in our HTML doesn't really matter anything doesn't matter with position fixed position fix guarantees you that this element is gonna be 50 pixels away from our from left here from our screens left position we can make this bigger or smaller doesn't matter it's always gonna be there let's see the next one the last one that we're gonna cover is position stat a sticky I apologize I'm gonna keep this one actually just so we can scroll are small beautiful lorem ipsum here but up here I'm gonna delete these and I'm gonna add h1 we're gonna say hello my website cool alright and down here I'm gonna add a nav all right and we're gonna just add some items like home we're gonna add a about a contact okay just like that awesome let's add a default style to this so we're gonna see nav we're gonna add a background let's see do I have one saved here huh I do background-color it's kind of like ugly as hell Wow back in 90s awesome but that's besides the point we don't care about making this look nice but what we can do here is if we add position sticky to this and we add a top of zero this as we scroll as you can see this is in position static now but as soon as we arrive here when as soon as we arrive there it's gonna stick right there to the top so it's basically gonna switch between position static and fixed right there so this is a cool thing you can do with your navbar if you want this effect we used to do it in JavaScript but right now it's super simple also make sure to check browser compatibility with this maybe you have to add a WebKit I'll leave a link below just to be sure if you want to use this but this one's really cool hopefully you enjoy this hopefully that make made any sense and yeah my voice is super dry right now because I filmed this ten times all right thank you so much for watching please drop a subscribe down below if you want to see more CSS top videos or JavaScript five videos or design videos anything you want I am up to do alright have a wonderful day and I'll see you tomorrow bye

Channel: Dev Ed

Views: 236,974

Keywords: css position propery, position absolute, position relative, zindex, css tutorials, css lessons, css training, css3 tutorials, css3 lessons, css3 training, advanced css tutorial, learn css, learn css for beginners, position sticky, position static

Id: gD3G67oPg-w

Length: 10min 13sec (613 seconds)

Published: Tue Dec 04 2018