When CSS Position property is used for Div Tag having value "Relative" then it shows no effect on the associated Div tag until you use other CSS positioning properties such as top, left, bottom, and right. When CSS top and left property is assigned any value then it shifts the postion of Div tag relvative its actual position. Lets understand the Div positioning using the sample below, the light shaded Div boundary shows the actual position of the Div tag having no CSS position, top or bottom property associated with it. After setting the CSS Properties it will shift the position of Div tag away from the assumed light shaded logical boundary of the Div tag. You can see the Div tag with red boundary below, it has CSS Property values:
position: relative;
top: 20px;
left: 20px;
It is exactly 20px away from top and 20px away from left boundary of light shaded logical position of the Div tag.
Note: To understand the sample we have written text "Actual Position" inside the logical boundary of Div tag. So top position margin with 20px starts from the bottom of the text "Actual Position" and ends at the top edge of the red boundary i.e. relative position of the targetted Div tag.
