Learn CSS Positioning Quickly With A Real World Example

once upon a time I was making a website for a client the client had a designer and this was the design they wanted me to code it was pretty standard almost everything is flexbox and the idea was that the website was floating in space then the designer thought that his design needed more space elements and so he sent me five images that I was supposed to position in strategic places to deepen the illusion of being in space positioning these images directly on the page would break the layout so I needed a way to position them without moving other elements around to start using CSS positions we first need some elements in our HTML all I have is a div with the class of container and 12 items nested inside of it each item is a div with the class of item and item 1 2 3 and so on when I save we see we actually have a grid this is because I have some base tiles and a separate CSS file none of this is relevant to CSS positioning you don't need a container with 12 items and you don't need a grid to start using the CSS positioning properties all of this is just for demonstration purposes in a fresh CSS file I'll select the first item in our grid by its class name and give it the position property in total there are five position values absolute relative fixed sticky and static when I set the position on our item 1 to Absolute we see that an item from our grid disappeared we have one three four five and so on but we don't see item two and this is because it's hidden underneath item one to move item 1 we can use the top right bottom and left properties these properties are unlocked when we assign a position property to an element if I give the top property the value of 0 pixels we see now our item is positioned at the top of the page and also the reason we're missing an item from our grid is because when we set item 1 to have a position of absolute item 1 got removed from the grid actually it got removed from the entire document elements that are assigned a position of absolute are removed from the document no space is created for them and other elements will behave as if that element never existed if I set left to 0 pixels now our item is on the top left corner if I set the bottom to zero pixels nothing happens this is because it doesn't make sense to have both a top and a bottom I can comment out the top property and now with the bottom of 0 pixels we see that the element is positioned at the bottom left corner the same goes for the left and right properties I use one of them but not both at the same time I'll comment out the left property and set the red property to zero pixels I'll also comment out the bottom property and set the top property to zero pixels now our item is positioned at the top right corner but what happens if I give our top and red properties some negative numbers I'll set both to -50 pixels and now our item is half visible this is pretty cool but we've got some horizontal scrolling I can select the body and give it the Overflow X of hidden and now the horizontal scrolling is gone did you notice whenever we were defining values on the top right bottom and left properties that those values were positioning item 1 relative to the entire page minus 50 pixels on the top and right properties places item 1 at the top right corner of the entire page if I wanted item 1 to position itself relative to its parent then we need to select the parent and give it a position any position value will work except static because static is the default value I'll set the position to relative and now we see item 1 is being positioned relative to the parent instead of the entire page the way this works is over on the HTML item one is asking the parent whether it has a position property if not then it asks the next parent and the next and then next until it finds one with the position property defined and if it doesn't find one then it defaults to being positioned relative to the HTML element now that item 1 is being positioned relative to The Container it's stacking itself above item 5. if we wanted item 1 to be layered underneath item 5 what we can do is use the Z index property and set it to -1 back on my client's website I give the planet the position of absolute the planet is now removed from the document but is stacking above other elements I use the Z index property to layer the planet underneath the other elements also I give the planet an opacity of 0.3 because the planet is way too bright I played around with the top and right properties until I was happy with the position and I also added an overflow X of hidden on the body to remove the horizontal scroll bar and finally I repeated the same process for other images if I select item 1 and give it the position of static we see nothing happens if I give it a top property of 0 pixels nothing happens if I set it to 1000 pixels still nothing happens nothing is happening because static elements not have access to the top right bottom and left properties nor do they have access to the Z index property on the other hand if I set item 1 to have a position of relative we see again nothing happens but unlike the static position relative has access to the top right bottom left and Z index properties if I give it a top property of 0 pixels it doesn't move however if I set it to 100 pixels we see it pushed it 100 pixels away from the Top If I give it a left property of 100 pixels we see now it pushed it 100 pixels away from the left unlike the position of absolute elements with the position of relative remain in the normal flow of the document use relative when you want to keep your element in the normal flow of the document and use absolute when you want to remove your element from the normal flow of the document on the footer I want to push this animation slightly towards the right normally I would just use a margin left but in this case I can't because I set the width and height with percentages and if I use margins the animation would shrink so what I can do is give the animation the position of relative and use the left property to push it slightly to the right without it shrinking the two final positions are fixed and sticky they both stick an element into position but they do it slightly differently fixed actually behaves very similarly to the absolute position like absolute elements with the position of fixed are removed from the document so when I set item 1 to a position of fixed we get the same behavior as we did when we were working with absolutes item 1 was removed from the entire document and is currently layered on top of item 2 which is why we don't see item 2. however one area where fixed is different than absolute is when we start scrolling we see item 1 is now following us when we're scrolling the page the second area where fixed differs from absolute is unlike the absolute element a fixed element is always positioned relative to the HTML element I can set item 1 with a top of 0 pixels and this will stick it to the top of the page I'll also give it a left of 0 pixels a border radius of 0 a width of one hundred percent and a z index of one guess what we now have a header I can also have it be a bottom Header by replacing top with bottom and now we have a bottom header the sticky position Works similarly to both relative and fixed I'll select item 5 and give it the position of sticky we see nothing happened and also if I scroll the page nothing is happening but if I give it a top of 0 pixels and start scrolling now item 5 is scrolling down with us until it hits the end of the container sticky only works when we Define a top property the value we put in the top property represents the space before the element we'll start scrolling down with the page if I set top to 50 pixels now the space between the element and the top of the viewport needs to be 50 pixels before the element starts sticking to it the client requested a bottom header indicating that the website is still under development and also requested that the text and the Builder section stick to the page when scrolling to create the heading I add a div with the class of bottom heading I give it the position of fixed the bottom of 0 pixels the left of 0 pixels the width of 100 a background color a color and is at index of one then for this section to stick when scrolling all I have to do is give it the position of stick key and also give it a top property after all these changes were made I had a happy client and he left me a nice review on upwork this is pretty much everything you need to know to start positioning things yourself if you enjoyed the video please consider liking and subscribing to the channel thanks for watching

Channel: Slaying The Dragon

Views: 457,232

Keywords: positioning, relative, absolute, css, positions, fixed, sticky

Id: MxEtxo_AaZ4

Length: 8min 31sec (511 seconds)

Published: Tue Dec 06 2022