The top and left
properties appear to work similar
to the margin-top
and the margin-left properties.
But there is a big difference between them.
Let's look at an example. When you set the top
property of a relative element to 50px,
only that element is shifted by 50px from the top.
But if you set the margin-top property to 50px,
all the elements below this particular
element are also shifted down by 50px.
Try changing top to margin-top for the
relative element in the example given below:
Similarly, when you set the left
property of a relative element,
only that element is shifted
from the left of its original
position.
Try changing margin-left to
left for the button
in the example given below: