Hello, World! In this article, we will try to grasp the concepts of one of the trickiest and crucial topics in CSS. Position layout property in CSS is solely used to place and position elements respectively in an HTML document. They assign respective positions to HTML elements so that the overall design of our page is maintained and managed well. The widely used positions property in CSS are as follows: 1. Static position: When an HTML element gets assigned with position, the various position properties like , , and doesn't work. Elements in an HTML document carry static position by default. static left right top bottom Let's copy and paste the code below in an IDE to view what's happening. This is Section This is Div 1 This is Div 2 This is Div 3 <!DOCTYPE html> < = > html lang "en" < > head < > style { : ; : ; : solid blue; : cyan; : monospace; : ; : center; } , , { : solid red; : ; : ; : ; : center; : inline-block; } { : static; : ; : ; } #Section height 200vh width 800px border 5px background-color font-family font-size 2rem text-align #Div1 #Div2 #Div3 border 4px font-size 1.5rem width 200px height 100px text-align display #Div2 position left 20px top 50px </ > style </ > head < > body < = > section id "Section" < > p </ > p < = > div id "Div1" < > p </ > p </ > div < = > div id "Div2" < > p </ > p </ > div < = > div id "Div3" < > p </ > p </ > div < > section </ > body </ > html Upon adding position property to the selector id , we saw that the position of box didn't change. Hence, we can conclude that elements with position doesn't get affected by , , or properties. static Div2 Div2 static left right top bottom 2. Relative position: When an element gets assigned with position , the position properties like , , and affects the element's position in the page relative to its normal position as . relative left right top bottom static Let's copy and paste the code below to selector to replace the previous position property. Div2 { : relative; : ; : ; } #Div2 position left 20px top 50px We can see that the box changed its position relative to its normal or position, i.e. from the and from the . Upon applying position property to an element, other contents in the same box won't get affected and change positions. Div2 static 20px left 50px top relative 3. Fixed position: This position property is used to freeze an element in a particular location of the page so that scrolling doesn't affect the visibility or location of the element. When we apply value to a selector, it gets removed from the flow of the HTML document, i.e. the selector element gets uprooted from its actual position, becomes relative to the entire viewport, and doesn't get scrolled. fixed Let's copy and paste the code below to know the difference. This is Section This is Div 1 This is Div 2 This is Div 3 <!DOCTYPE html> < = > html lang "en" < > head < > style { : ; : ; : solid blue; : cyan; : monospace; : ; : center; } , , { : solid red; : ; : ; : ; : center; : inline-block; } { : fixed; : ; : ; } #Section height 400vh width 800px border 5px background-color font-family font-size 2rem text-align #Div1 #Div2 #Div3 border 4px font-size 1.5rem width 200px height 100px text-align display #Div2 position left 0 top 0 </ > style </ > head < > body < = > section id "Section" < > p </ > p < = > div id "Div1" < > p </ > p </ > div < = > div id "Div2" < > p </ > p </ > div < = > div id "Div3" < > p </ > p </ > div < > section </ > body </ > html After scrolling, we can see that the id gets fixed in the topmost corner of the document. Div2 4. Absolute position: Just like position, the position property removes selectors from the flow. As the element gets removed from its normal position, the parent element doesn't regard it as its child anymore. The element becomes relative to the document. fixed absolute Let's copy and paste the code below to see how position affects the element. absolute Overall This is Section This is Div 1 This is Div 2 This is Div 3 <!DOCTYPE html> < = > html lang "en" < > head < > style { : ; : ; : solid blue; : cyan; : monospace; : ; : center; : static; } , , { : solid red; : ; : ; : ; : center; : inline-block; } { : absolute; : ; : ; } { : orange; : solid; : relative; : monospace; : ; } #Section height 400vh width 800px border 5px background-color font-family font-size 2rem text-align position #Div1 #Div2 #Div3 border 4px font-size 1rem width 200px height 100px text-align display #Div2 position left 0 top 0 #overall background-color border position font-family font-size 3rem </ > style </ > head < > body < = > section id "overall" < > p </ > p < = > section id "Section" < > p </ > p < = > div id "Div1" < > p </ > p </ > div < = > div id "Div2" < > p </ > p </ > div < = > div id "Div3" < > p </ > p </ > div </ > section </ > section </ > body </ > html We can see that the element with id becomes absolute to a parent element with id . Let's tweak the code to see how the element with position behave if there are no parent elements with non position value. Div2 overall absolute static { : orange; : solid; : monospace; : ; } #overall background-color border /* position: relative; */ font-family font-size 3rem The selector element with id gets absolute with the document. Div2 When position property is applied to an element, it becomes relative to its parent element if and only if the parent element is not positioned . The element becomes absolute to its nearest parent with position value apart from . absolute static static
