absolute and relative position properties are used a lot in CSS and seem to be doing the same work, which is positioning an element in the page. But in reality, they’re different.

In this tutorial we’ll see how each one of these properties work.

1)-First difference

a)- absolute position

Let’s just take a simple html page that contains 4 <div></div> tags one inside another. These <div></div> tags have a width, height and a background-color.

The HTML code will be:

content - longest_content -->

And the CSS code is:

content_7 - incontent_7 -->

the display flex property is just to center the box

es vertically one inside another. So at the end we’ll have:

Now let’s apply the position absolute to the small blue box, which means box 4.

So the CSS code becomes:

If you refresh the browser you will not see anything changed. Why? Because the absolute position needs top, bottom, left and right values.

let’s position this blue box at the top left corner of the green box. For that we’ll set the top and left to 0px and see what will happen.

The CSS code will be:

So in the browser we’ll have:

Wow, what’s this! This is not what we want at all ! Why did the blue box move to the top left corner of the page instead of the top left corner of the green box ?

Well, it is because when applying the absolute position to an element, It positions itself to the closest parent that has already its position set.

Here in this example, none of the 3 remaining boxes (light blue, red, green) have their position set. The default position that they have is unset.

So the small blue box did not find any parent element to position itself to, so what it did it positioned itself to the body.

Now, if there was a parent element with a specific position already set, let’s say the position of the green box (which means box3) is set to absolute:

We would have had the results wanted:

Let’s say now that we want to position the blue box to the red box, so we will add the absolute position to the red box (box 2) and remove it from the green box. Because if we keep the absolute position in the green box as well, the small blue box will position itself to the the closest parent it finds that has the absolute position.

So the code will be:

In the browser we’ll have:

b)- relative position

Now let’s change the position type of the blue box and set it this time to relative instead of absolute. Also let’s give it a top value of 10px and a left value of 20px.

So in the browser we’ll have:

As you have probably noticed, the blue box this time positioned itself to its origin, and not to a certain parent element as with absolute position. And this is the difference between absolute and relative positioning.

You can add absolute or relative position to any parent box you want, this will not affect the positioning of the small blue box.

Because relative position cares only about the origin of the element, and not about a certain parent element position like absolute position does.

2)- Second difference

a)- absolute position

Now let’s take 3 boxes, or 3 <div></div> tags that will be aligned one next to another. Each box has a background-color:

So in the browser they look like:

Now we’ll add position absolute to the orange box in the middle (box 2):

If we check the browser we’ll find this:

Wait! Where is the green box? Is it removed from the HTML page?

Well, actually the green box is still there, it is just that the orange box is hiding it. To see the green box let’s add some left and top properties to the orange box:

Now in the browser we can see the green box:

But what happened exactly?

Well, when we apply the absolute position property to an element, it no longer belongs to the document flow. The absolute position removes the element from the document flow, and as a result, the place that this element occupied is now filled by the rest of HTML elements, so this way, when the element to which we applied the absolute position moves, there will be no gap between the elements.

That’s what happened to the orange box here. As absolute position is applied to it, the orange box moved and the space that it occupied was quickly filled by the green box.

b)- relative position

Now let’s add relative position to the orange box instead of absolute, and keep the same left and top values:

So in the browser we’ll have:

As you have probably noticed, this time the space that the orange box occupied before is not removed or filled by another HTML element, it is still there. So here box 2 is not taken out from the document flow, it simply shifted to the left and top by the values we gave it.

And this is the 2nd difference between absolute and relative positions.

3)- Conclusion

absolute and relative positions seem to work in the same way but they are very different.

absolute position takes the element out of the document flow and positions the element to the closest parent that has a position property set. If there is no close parent, then the element is positioned to the body.

relative position keeps the element in the document flow and positions it to its origin.