为什么边距绝对/相对位置的行为相同

Question

我看到顶部/左侧属性与位置绝对位置和位置相对应显示差异。

当我在位置上设置margin-top时：相对于根据包含容器正确定位。但是当我在position上设置margin-top：absolute时，我认为它应该根据BODY元素定位，但它的位置与position：relative相同，相对于包含元素（#container）。而且我也没有设置任何非静态元素。

这是具有position：relative的代码 http://jsfiddle.net/uFta4/

这里有位置：绝对 http://jsfiddle.net/uFta4/2/

请注意，＃firstDiv位于相对于#container的相同位置。

它应该与BODY元素相关吗？

Answer 1

position:absolute和position:relative的边距应该相同。

在第一个示例中，相对定位的元素没有设置位置值，因此没有效果。

在第二个示例中，绝对定位的元素也没有设置位置值，因此它位于正文的左上角。这是从顶部60px到占据身体20px的边距和元素本身的40px边缘。

并引用the specification ...

  

绝对定位框的边距不会崩溃（甚至不包括流入的子项）。

Answer 2

这是因为在某种意义上RP和AP元素之间存在差异，RP元素会“折叠”它们的边距，而AP元素不会折叠它们的边距。这就是为什么你在相同的位置看到AP元素的原因，因为它也计算了你在标签中给出的BODY边距。

为了让你更好理解我已经放了几个代码。 查看以下变化并观察RP和AP元素的不同行为边缘折叠。 RP

1. RP元素边距折叠http://jsfiddle.net/uFta4/6/
2. 添加了AP元素边距http://jsfiddle.net/uFta4/7/
3. 添加了-ve margin的AP元素（变为-20px）http://jsfiddle.net/uFta4/9/
4. 带-ve margin折叠的RP元素（不会变成-30px）http://jsfiddle.net/uFta4/10/

我希望现在你会清楚。