I remember when I started learning CSS, I was always confused about the CSS position property. Not knowing when to use the top, bottom, left or right attribute. Or even when I use them I don’t get my desired output. IDEOLOGY We will be using the below as our template HTML through out the document. < > body < = > div id "parent" < = > div id "first_child" </ > div < = > div id "second_child" </ > div < = > div id "third_child" </ > div < > div </ > body CSS. { : ; : ; : white; : solid green; } { : ; : red; } { : ; : blue; } { : ; : black; } #parent height 210px font-size 25px color border 3px #first_child height 70px background-color #second_child height 70px background-color #third_child height 70px background-color When positioning an element with CSS, you have to take note of the position property of the parent. Cause if the parent and child positional property doesn’t correspond, you might not get the desired output. An element that contains other elements is a parent element. And if the child it contains is also a parent then, it is a grand-parent element. TYPES pheeewwww. since we’ve got them out the way, There is five-position value in CSS. which are : 1. Static (non-positional) 2. Relative (positional) 3. Absolute (positional) 4. Fixed (positional) 5. Sticky (positional) STATIC POSITION This is the default property of all block elements. that is, even if an element’s position is not defined, it is statically positioned. If a child is statically positioned in the parent is doesn’t care about the position property of the parent. It positions itself according to how it’s defined in the parent. top, left, right, the bottom property doesn’t affect the static positioned element. RELATIVE POSITION The relative position is like the static position, in that it doesn’t care about the parent position. But it is different cause top, right, left, bottom property work on it. It is positioned relative to where it would be if it is statically positioned. If top, left, right, bottom property for relative position element not assigned, it will appear as though is it static positioned. The image above results from positioning the second child with a relative position value with left and top property. { : ; : blue; : relative; : ; : ; } #second_child height 70px background-color position left 50px top 10px ABSOLUTE POSITION It cares about the parent positional value. It positions relative to the nearest positional parent (relative, fixed, sticky). If a child has an absolute position value, it checks if the direct parent is a positional element. If his direct parent is not positional, it checks the grand-parents until he finds a positional parent or grand-parent. He then positions itself relative to the positional parent or grand-parent. If he doesn’t find any positional parent or grand-parent he positions itself relative to the body of the document. The above image shows the third child position with absolute value. Because the parent is not a positional element, it is position relative to the body. { : ; : ; : white; : ; : solid green; } { : ; : black; : absolute; : ; : ; } #parent height 210px font-size 25px color margin-top 50px border 3px #third_child height 70px background-color position top 10px left 50px As the parent becomes a positional element, then the third child will be position relative to the parent. { : ; : ; : white; : ; : solid green; : relative } { : ; : black; : absolute; : ; : ; } #parent height 210px font-size 25px color margin-top 50px border 3px position #third_child height 70px background-color position top 10px left 50px FIXED POSITION Element with fixed position behaves as though they don’t have a parent. Even when wrapped inside a parent element, they are always positioned to the viewport. That is, fix positioned element will always show on the screen regardless of the scrolling position of the page. { : ; : ; : white; : ; : solid green; } { : ; : blue; : fixed; : ; : ; } #parent height 210px font-size 25px color margin-top 50px border 3px #second_child height 70px background-color position top 20px right 100px STICKY POSITION The sticky positioned element behaves like a fixed positions element. In that, it behaves as though it doesn’t have a parent and is position relative to the viewport. the difference of it from the fixed-position element is that it doesn’t always stay in the viewport of the page. It is fixed in some offset position and then scrolls way when the offset exceeds. CONCLUSION The position property of CSS can be tricky at first but with practice, you will get a hang of it. Note that absolute position always finds the nearest positional parent in the hierarchy. And is rendered relative to the parent.
