position: relative;

 1) Position relative does not render any change in the position of the element just like position static, unless its' four offset properties are used.

The four offset properties are:

2) Use of position relative:

In our example the div with id=parent is the parent element and div1, span1 and span2 are the children, We are gonna use position relative with its' offset properties to the child span2. The offset properties of the child span2 will be in reference to the parent div.

CASE 1)  when position relative is not used:

The output is exactly as it should be.

CASE 2) When position: relative; and its' offset properties bottom:10px; and right:20px is used on the child span2.

We can see that the child span2 has move 10px up from the bottom of its parent element div and 20px to the left from right side of its' parent element div, because of the position relative property and its' offset bottom and right used on the child span2