有什么区别
margin-left: 10px;和position: relative; left: 10px;？
似乎产生了相同的结果
答案 0 :(得分：45)
当您使用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/
注释掉position:relative;和top:100px;行并取消注释margin-top行，您会看到差异。
答案 1 :(得分：40)
我可以解释的最简单的方法是margin-left移动元素本身，而left（带position: relative）推动其他元素。虽然那不是，也许是最清晰的描述。
有了图片，但是：
+---------------------------------------------------------------------------+--------------+
| |
| +------------------------------------------------------------+ |
| | | |
| | +------------------------------+ | |
| | | | | |
position | | | | | |
<--Left---->|<---margin--->|<---padding-->|<------------width----------->|<---padding-->|<---margin--->|
| | | | | |
| | +------------------------------+ | |
| | | |
| +------------------------------------------------------------+ |
+------------------------------------------------------------------------------------------+
左边的position: absolute也用于定义元素本身与元素所针对的任何对象的左边界之间的距离。
答案 2 :(得分：0)
我只能假设它有其他有边距的头寸。即：
margin-left: 5px;
position: inherited; left: 10px;
答案 3 :(得分：0)
将任何给定的块元素（例如DIV）视为一个框。 position:relative;使页面上的框相对于嵌套在其中的元素（例如另一个DIV），left:10px;将框移动到右边10个像素（从左边开始）。
现在margin-left: 10px;与此无关，只是在框的左侧创建了一个边距（如果您愿意，则为一个不可见的幂场：P），如果其上有另一个固定元素，则会移动它左
答案 4 :(得分：-1)
margin-left, margin-right, ... => 这些在其父级的填充之后添加像素 但 top, left,... => 这些从其父级的边缘（边框）添加像素，忽略填充 假设他们的父级的定位是相对的