One of the things that confuse 🤯 most CSS beginners is the difference between position: absolute; and position: relative;. Also, we have to use these two positionings very often in your codes🤪. So, I decided to explain the difference between these two through codes.

Firstly let's see what happens when we don't define the position 🤔

By default HTML elements have position static. position: static; means that the element will flow into the page as it normally would and top, right, bottom, left and z-index properties do not apply.

The only reason why we would ever set an element to position: static; is to forcefully remove some positioning that got applied to an element outside of our control. And believe me, this is fairly rare, as positioning doesn’t cascade.

Lets understand this through an example-

index.html

<h2>When position is not defined by default it will be static</h2>

<div class="parent-block">
    <div class="block" id="first">1</div>
    <div class="block" id="second">2</div>
    <div class="block" id="third">3</div>
    <div class="block" id="fourth">4</div>
</div>

style.css

.parent-block {
    border: 2px black dashed;
    display: inline-block;
}
.block {
    display: inline-block;
    background: #e650da;
    width: 150px;
    height: 150px;
    text-align:center;
}
#second {
    background: #5075e6;
}

👉As you can see in the above code snippet we haven't defined position. So, here the by default position static will apply and it positions based on the layout in the flow.

Ok! Now, what happens when we define position: relative 😮

position: relative; will position the element based on its current position without changing layout. That is if we set position: relative; on an element but no other positioning attributes (like - top, left, bottom, or right), it will not affect its positioning at all. And it will behave exactly as it would be if you left it as position: static;

But, if we give it some other positioning attribute, say, top: 10px; it will shift its position 10 px down from where it would normally be.

In the following example I have set position:relative;, top: 40px; and left: 40px;. We can see that the blue box moved 40 px from top & left relative to its current position without changing the layout.

index.html

<h2>position: relative on second block</h2>

<div class="parent-block">
    <div class="block" id="first">1</div>
    <div class="block" id="second">2</div>
    <div class="block" id="third">3</div>
    <div class="block" id="fourth">4</div>
</div>

style.css

.parent-block {
    border: 2px black dashed;
    display: inline-block;
}
.block {
    display: inline-block;
    background: #e650da;
    width: 150px;
    height: 150px;
    text-align:center;
}
#second {
    background: #5075e6;
    position:relative;
    top:40px;
    left:40px;
}

How position: absolute; works🧐

position: absolute; will position an element based on its closest positioned ancestor position. This is a very powerful💪 type of positioning that allows us to literally place elements wherever we want on the page. Also, absolute positioning elements are removed❌ from the flow of elements on the page.

In the below picture we can see by applying position: absolute; to the Blue Box, it will not leave any gap where it would have been. The position of the Blue Box is based on its parent position (the dashed border). Thus, moving 40px to the left and bottom from the top-left origin of the dashed border. index.html

<div class="parent-block">
    <div class="block" id="first">1</div>
    <div class="block" id="second">2</div>
    <div class="block" id="third">3</div>
    <div class="block" id="fourth">4</div>
</div>

<h2>position: absolute on second block</h2>

style.css

.parent-block {
 border: 2px black dashed;
 display: inline-block;
}
.block {
 display: inline-block;
 background: #e650da;
 width: 150px;
 height: 150px;
 text-align:center;
}
#second {
  background: #5075e6;
  position:absolute;
  top:40px;
  left:40px;
}

You made it through this long blog post

TL;DR

➡️By default position is static

➡️position: relative places an element relative to its current position without changing the layout around it.

➡️position: absolute places an element relative to its parent’s position and changing the layout around it.

That's It!!!

Thank you for making it this far, and I hope you learned a lot from it!

Do share your valuable suggestions in the comments, I appreciate your honest feedback! Let's connect on Twitter and LinkedIn🤩