Relative Position

The relative position of an element will allow it to be positioned on the page relative to its original position.

In the example below the 3 div elements display on top of each other without any positioning.

In the second codepen we have the position:relative; added to the div with class box2. Notice there is no change as the default position values are left:0; and top:0; so the element, relative to its original position stays at the same position.

In the third codepen we have added top:50px; and left:50px; which moves the element 50px from the top and left edges of its original position.