由于position:relative这个属性并没有脱离文档流的，所以元素本身所占的位置会保留

<div style=" width:100px; height:100px;">div1</div>
<div style=" width:100px; height:100px; position:relative; top:-20px; left:50px;">div2</div>
<div style=" width:100px; height:100px;">div3</div>

我们可以看到蓝色边框就是div2原来的位置，黑色边框就是通过position:relative相对于原来的位置左移50px; 上移20px得到的，而且我们看以看到，div3并没有因为div2的上移而上移了，原因就是position:relative这个属性是没有脱离文档流的，所以元素本身所占的位置会保留。

详细链接http://blog.csdn.net/libertea/article/details/11662661