Difference between css position absolute versus relative

I spent sometime understanding the difference between absolute positioning and relative positioning. It was a confusing topic to me and I decide to illustrate their differences with pictures.

Before going further, we should know the default behaviour of position when we don’t specify any position property.

position: static

By default, position an element based on its current position in the flow. The top, right, bottom, left and z-index properties do not apply. — source MDN

position: relative

Position an element based on its current position without changing layout.

position: absolute

Position an element based on its closest positioned ancestor position.

Take an example

To start with, create a parent container with 4 boxes side by side.

index.html

<div class=”parent”>
 <div class=”box” id=”one”>One</div>
 <div class=”box” id=”two”>Two</div>
 <div class=”box” id=”three”>Three</div>
 <div class=”box” id=”four”>Four</div>
</div>

style.css

.parent {
 border: 2px black dotted…