Question

1.position:absolute;left:200px;

2.position:absolute；margin-left:200px;

上述风格有什么不同吗？

Answer 1

有一个微妙的区别。

考虑以下示例：

<div class="wrap">
    <div class="ex1">Ex 1</div>
    <div class="ex2">Ex 2</div>
    <div class="ex3">Ex 3</div>
</div>

body {
    margin: 0;
}
.wrap {
    margin: 0 50px;
    background-color: lightgray;
    height: 200px;
    width: 400px;
}
.ex1 {
    position: absolute;
    background-color: beige;
    margin-left: 50px;
}
.ex2 {
    position: absolute;
    left: 50px;
    background-color: beige;
    margin-left: 0px;
}
.ex3 {
    position: absolute;
    top: 50px; /* so you can see what is happening */
    left: 0px;
    background-color: beige;
    margin-left: 50px;
}

查看结果：http://jsfiddle.net/audetwebdesign/WQA6B/

在示例1（.ex1）中，边距距父容器的左边缘（.wrap）为50px。

在示例2（.ex2）中，元素距视图端口的左边缘50px。

要使.ex2的行为与.ex1类似，您需要设置position: relative 到.wrap所以两个div都是根据相同的上下文定位的。

还有另一个因素。在示例1中，我没有指定任何偏移量，因此如果您使用了position: static，则元素将保留在该位置，这就是相对于包装器左边缘计算边距的原因。 / p>

如果我设置了left: 0（参见示例3），您将获得类似于示例2的结果。

Answer 2

即使他们可以做类似的事情，但他们完全不同。

保证金是box model的一部分，其中还包括padding和border。 Box模型样式会改变对象本身的大小。

例如，如果您的图像具有以下样式：

.my_box {
  display:block;
  margin-left:10px;
}

具有my_box类的元素将在框的左侧添加10像素边距。

顶部，左侧等

这些是positions，而不是添加到元素框模型的大小，字面意思是tell the elements where to be。

.my_box {
  display:block;
  left:10px;
}

上面的样式会告诉该元素距其容器左侧10像素（如果position:relative或页面（如果position:absolute）。

Answer 3

是的，有区别。

请参阅小提琴：http://jsfiddle.net/xk8Lz/

注意父母＆＃34;中的10px padding元素到绝对定位元素。填充和边框将影响绝对定位Div的边距。

左边将从＆＃34;父母＆＃34;的开始算起元件。

代码：

<div class="left">
    left parent
    <div class="abs">Left</div>    
</div>

<div class="marginLeft">
    margin left parent
    <div class="abs">Margin-Left</div>    
</div>

的CSS：

div, span {
    border: 1px solid #000;
    height: 80px;
    width: 80px;
}
.left, .marginLeft {
    background: #aaf;
    margin: 10px 0 0 10px;
    padding: 10px;
    position: relative;
}
.marginLeft {
}
.abs {
    background: #faa;
    position: absolute;
        top: 0;
}
.left .abs {
    left: 100px;
}
.marginLeft .abs {
    margin-left: 100px;
}

当位置设置为绝对值时，左右边距之间的差异

3 个答案: