Difference between an absolute, relative and fixed positioning

I have seen many of the front-end developers always getting confused with these concepts and they end up trying every possibility that matches their scenario. Thus, I thought of describing all of these concepts one by one with proper figures.

First things first, I would like to start by describing some of the CSS properties before I jump into position property.

Unlocked properties :-

The Position property unlocks four CSS properties to access. They are as follows: -

1. top
2. right
3. bottom
4. left

Lets discuss first what do each of these properties mean -

1. top: - With the top property, you can actually push your element down from the top. See below diagram to understand properly.

2. right: - Right property pushes the element from the right to the left. See below diagram.

3. bottom: - Bottom property when unlocked using the position attribute gives the privilege to push the element from the bottom to the top.

4. left:- Left property pushes the element from the left to the right.

As we have discussed now about the unlocked properties, lets learn more about the difference between the position properties.

1. Relative: Making an HTML element relative, gives you the privilege to move the element from its current position. It does not refer to a different element’s position. For example -