CSS Absolute vs Relative Position EXPLAINED!

absolute and relative positioning is one of the most basic things in CSS and everyone knows but do you really understand how they actually works in this video we are going to talk about absolute position versus relative in details along with some examples let's check it out so here is our example page I have four boxes box one is parent of box 2 2 is parents of 3 and 3 is parent of 4 respectively I only set the size and background and use display flex to Center them now I'm going to try setting the position of box 4 to absolute you see that nothing happened this because an element need two things to position itself first is the coordinates such as top left right bottom properties and second is the parent element it can position itself too so now I'm going to try setting top left to zero you will see that the box 4 is now positioned itself to the body instead of top left corner of box 3 this because in order to be an eligible positioning parent the element needs to have their position define the default value of position property is unset so when we set the box for position to absolute none of them are eligible parent and box 4 has to position itself to the body now what will happen if we add position absolute to box 2 you see that box 4 is now positioned itself to box 2 instead of the body because box 2 is the closest parent that have partitioned define so if I add position:absolute to box 3 box 4 will now positioned itself to the box 3 instead of box 2 you because box 3 is now closest eligible parent now let's set box 4 position to relative and add some top left you'll see that box 4 is moving away from origin or position by the value we have set adding position to any parent boxes will not affect the box for this time this is the difference between absolute and relative because relative only cares about original position while absolute have to find closest eligible parent element another major difference is absolute position removes the element from the normal document flow let's look at this example we have box 1 with box 2 inside it but we only set width and height for box 2 and only padding for box 1 so the box 1 size is depending on box you as you can see currently I have set position relative for box 2 let's try increasing left property you will see that the size of box 1 remain unchanged now let's try changing box 2 position to absolute now you notice that the box one size is reduced the only thing you can see now is padding this because the absolute position removed box 2 from document flow therefore box one didn't make space for box two anymore so to sum up absolute position need two things a coordinates and eligible positioning parent also it removes an element from document flow relative only cares about moving away from original position and does not change the document flow if you loved this video don't forget to like or subscribe to stay tuned with us for more thanks for watching and see you next time bye

Channel: Red Stapler

Views: 83,924

Keywords: css, css position, css position tutorial, css absolute, css relative, css absolute vs relative, css position absolute vs relative, css position absolute vs relative difference, css position absolute relative, css absolute and relative position tutorial, css absolute positioning, css relative positioning, css relative and absolute, css positioning

Id: 3PDQDRJq5Ls

Length: 3min 55sec (235 seconds)

Published: Wed Feb 27 2019