Learn CSS positions in 6 minutes! 🎯

hey everybody so today I'm going to explain the position property in CSS there's five possible values relative fixed absolute sticky and static let's begin by creating a div section I'll give this div an ID of box one within my style sheet we will select the ID of box one I'll set the width to be 200 200 pixels height to be 200 pixels as well and a background color background Dash color let's go with the blue color we haven't picked blue for a while that's pretty good all right the position property with a position set to relative relative positions and element relative to where it normally should be with our position property set to relative we can move this element to the right to the left upwards or downwards we do have the properties of top bottom left right to push this element down relative to where it normally is I can set top to some value we can do that in pixels if I set top to be 100 pixels this element will be pushed downwards by 100 pixels relative to where it normally is in the top left corner another property is left I will push this element to the right by 100 pixels by setting left to be 100. so now this element is pushed to the right by 100 relative to where it normally is it's down and to the right by 100 pixels negative 100 would move this element up left set to negative 100 would move the element to the left it's kind of backwards this element is positioned relative to where it normally should be then we have fixed with fixed an element is positioned relative to the viewport meaning the web browser for this example we're going to need a whole lot of paragraphs like 20 of them I'll type lorem hit tab to generate some text copy this line and paste it like 20 times all right that's good enough let's get rid of these properties I will set the position to be fixed this element is now fixed within the viewport it's stuck in the top left corner if I were to scroll down this element is still in the top left corner of my web browser this element can be fixed to the right by setting the right property to be zero pixels zero works as well so now this element is in the top right corner with the bottom property if I were to set that to be zero pixels well now this element is in the bottom right corner this might be good for an advertisement if you had a banner for the bottom left corner that's left zero bottom zero that is the fixed position this element is fixed in my viewport my web browser then we have absolute with absolute an element is positioned relative to its nearest ancestor think of an ancestor as a containing class within box 1 we'll create box two change the ID to box two with box one let's set box one to be relative then get rid of these properties we'll create box two by copying box one change the ID to box two the width will be 100 the height will be 100 but we'll pick a different color something red is good the position for Box 2 will be absolute since Box 2 is contained within box 1 box 1 is its nearest ancestor if I were to move box 1 Box 2 is still going to stay in the top left corner of box one let me demonstrate I'll set the top property to be 100 pixels then left to be 100 pixels as well so even though we're moving box one box two it's positioned absolutely it's still going to stay within its container let's try and put Box 2 right in the middle of box one I will set the top property to be 50 pixels and the left property to be 50 as well now Box 2 is right in the middle of box one we can move box one anywhere let's set the position of box 1 to be fixed so box two is still gonna stay right in the middle of box one no matter where it is so that is the absolute position an element is positioned relative to its nearest ancestor then they're sticky a sticky element is positioned based on the current scroll position meaning our scroll bar so to say with box one box one will be sticky let's set top to be zero pixels what happens now is that when I scroll down our web browser is going to catch this element sticky is kind of similar to fixed with sticky we reserve some space for the original element if I were to change that to fixed this element is just basically stuck to the top of my viewport with sticky it's going to be in the same place until we scroll past it alright then lastly their static static is the default position for an element in the future we will have the capability of changing these positions dynamically to set a position to the default which is static you just change it so those are the five position types relative fixed absolute sticky and static we'll have more practice with this in the future so don't worry this is more or less just an introduction and those are CSS positions

Channel: Bro Code

Views: 9,156

Keywords: CSS position, CSS relative, CSS fixed, CSS absolute, CSS sticky, CSS static

Id: G4AWXOr4W-k

Length: 6min 23sec (383 seconds)

Published: Thu Sep 21 2023