使用“margin-left:10px”来使用“position:relative; left:10px”有什么区别。
它似乎产生相同的结果..
它似乎产生相同的结果..
谢谢
乔尔
解决方法
当你使用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;}
你会看到第一个将一切向下移动50像素,而第二个只向下移动第一个图像(这意味着它将重叠第二个图像)。
编辑:你可以在这里检查它:http://www.jsfiddle.net/PKqMT/5/
注释掉位置:relative;和top:100px;行和取消注释margin-top行,你会看到差异。