When we want do complex designs we have to get out of the flow of our design. yes you hear right ! , Basically there is document flow when we create html file code is executed line by line and the final document is form lets see that.

<div>Header</div>
<div>Body</div>
<div>Footer</div>

So we can see these in order first header second body and so on. when these document flow is created all the elements are static you can see that using chrome dev tools.

But wait what is static , relative, & absolute and why we use them ?

lets take an scenario we have to add image on the top of another image or element or make the header stick to the top of the page and not move when you scroll up or down. To do this and much more using css we have use CSS Position property.

This property takes relative, absolute,fixed,sticky & static

Lets take an example.

In our Example we can see that our output has a document flow so that child1 ,child2 is in order and every child has its own space.

suppose you have to move first child to right or left using offset properties like top, bottom, right & left then what you do ? These offset properties does not apply to position static, we can look in the example

so as we can see the offset property does not affect on position static . To use these offset properties we have to use position relative, lets use position relative and check.

So What is position Relative ?

Position relative is works as a static but it allow us to use offset properties on it

If you want to swipe the postion of child 1 & 2 ?

Lets see the postion Absolute

Lets take a scenario we have to design a button and on the top corner of that button we have to set the notification dot that shows how many notifications are appear.

so look into that example the problem here is to move that span to top of the buttons corner. we solve these problem using the position absolute, so lets apply that property and see what happens.

so we can see here absolute brings span out of the document flow and align position according to position relative to its parent and here parent is root html element, thats why it goes to the top of the screen. but we have to align according to the button, so we have to set the parent for span to relative lets see that

see the difference when we set the parent position relative to span's absolute postion. lets set the final position.

final Conclusion : Absolute positioning takes elements out of the regular document flow while also affecting the layout of the other elements on the page.

Position Fixed & sticky we will cover in next blog