Relative Positioning

Let’s discuss relative positioning in more detail.

Relative positioning with the top, right, bottom and left values

As we mentioned above, position: relative is like a switch that turns on the top, right, bottom, and left properties.

When the top, right, bottom, and left properties are used on an element that has the position property set to relative, this is what happens:

• The element gets moved from its normal position in the document flow by the exact number of pixels we specified in the top, right, bottom, or left properties.
• The top, right, bottom, or left properties can have negative and positive values. For example, -100px or 100px.