Question

有什么区别 margin-left: 10px;和position: relative; left: 10px;？

似乎产生了相同的结果

Answer 1

当您使用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行，您会看到差异。

Answer 2

我可以解释的最简单的方法是margin-left移动元素本身，而left（带position: relative）推动其他元素。虽然那不是，也许是最清晰的描述。

有了图片，但是：

            +---------------------------------------------------------------------------+--------------+
            |                                                                                          |
            |              +------------------------------------------------------------+              |
            |              |                                                            |              |
            |              |              +------------------------------+              |              |
            |              |              |                              |              |              |
  position  |              |              |                              |              |              |
<--Left---->|<---margin--->|<---padding-->|<------------width----------->|<---padding-->|<---margin--->|
            |              |              |                              |              |              |
            |              |              +------------------------------+              |              |
            |              |                                                            |              |
            |              +------------------------------------------------------------+              |
            +------------------------------------------------------------------------------------------+

左边的position: absolute也用于定义元素本身与元素所针对的任何对象的左边界之间的距离。

Answer 3

我只能假设它有其他有边距的头寸。即：

margin-left: 5px;
position: inherited; left: 10px;

Answer 4

将任何给定的块元素（例如DIV）视为一个框。 position:relative;使页面上的框相对于嵌套在其中的元素（例如另一个DIV），left:10px;将框移动到右边10个像素（从左边开始）。

现在margin-left: 10px;与此无关，只是在框的左侧创建了一个边距（如果您愿意，则为一个不可见的幂场：P），如果其上有另一个固定元素，则会移动它左

Answer 5

margin-left, margin-right, ... => 这些在其父级的填充之后添加像素但 top, left,... => 这些从其父级的边缘（边框）添加像素，忽略填充假设他们的父级的定位是相对的

“margin-left”和“left”（或“margin-right”和“right”）之间的区别

5 个答案: