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: