当您使用position：relative移动某个东西时,您实际上并没有移动它在页面上占据的空间,只是在它显示的位置.

测试这个的简单方法是使用这样的简单结构：

<div id = "testBox">
  <img src = "http://www.dummyimage.com/300x200" id = "first">
  <img src = "http://www.dummyimage.com/300x200" id = "second">
</div>

使用以下CSS：

img{ display:block; }
#first{ margin-top:50px; }

与这个CSS：

img{display:block;}
#first{position:relative; top:50px;}

您将看到第一个将所有内容向下移动50px而第二个仅向下移动第一个图像(这意味着它将与第二个图像重叠).

编辑：你可以在这里查看它：http://www.jsfiddle.net/PKqMT/5/

评论这个位置：相对;和顶部：100px;线条和取消注释边缘顶线,你会看到差异.