为什么margin-top会影响绝对div的位置？

Question

我在这个jsFiddle中有两个div - http://jsfiddle.net/z4062jfn/ - 具有绝对定位。我没想到任何给予div的保证金值会影响他们的绝对位置。对于给予顶部div（CSS的uncomment第8行）的margin-bottom值，这是正确的。但是底部框的边缘值（取消注释CSS的第19行）确实将底部div位置向下移动了这个数量。

在这种情况下，允许保证金规则覆盖绝对位置规则 - 有时是什么？

<div id="box1"><p>box 1</p></div>
<div id="box2"><p>box 2</p></div>

Answer 1

为什么会发生这种情况的简单事实解释是偏移属性top，right，bottom和left实际上尊重每一侧的相应边距属性。 spec表示这些属性指定框的边距边偏离该特定边的距离。边距边缘在section 8.1中定义。

因此，当您设置顶部偏移时，会考虑上边距，当您设置左边距时，会考虑左边距。

如果您设置了底部偏移而不是顶部，则会看到底部边距生效。如果您尝试设置上边距，则上边距将不再有任何效果。

如果您设置两者顶部和底部偏移，两者顶部和底部边距，和一个高度，那么值就会结束 - 约束和底部偏移没有影响（反过来也没有效果）。

如果您希望了解为什么规范会以这种方式定义偏移，而不是为什么浏览器会采用这种方式行事，那么它主要是基于意见的，因为所有你＆＃ 39;得到的是猜想。也就是说，Fabio's explanation非常合理。

Answer 2

因为绝对定位的框从正常流中移除并且被指定相对于包含块的位置。如果您没有定义包含块，那么它是body。

因此，考虑到这一点，将包含块视为从左上角开始的坐标轴。如果您为元素提供此属性：

    position: absolute;
    top:100px;
    left:100px;

就像你一样，你将在左上方留下一个空的空间，因此，如果你应用margin-top或margin-left，它将起作用，因为你的元素能够虚拟地穿过两个轴的每个像素高达100px顶部和100px左侧位置，同样适用于负边距。但是，由于position:absolute从流中移除元素并对任何后续兄弟元素产生任何影响，因此很容易看出元素“完成”后不会发生任何事情，因此margin-bottom和margin-right将不起作用因为他们没有任何东西可以获得保证金。

我制作了一张图片来显示行为，因为我的解释可能有点模糊

Answer 3

由于您将margin bottom属性放入div中，因此top无效。移除top，您的margin bottom将适用于您的#box1。

Answer 4

保证金底部影响也是如此。请参阅下面的代码，如果您在＃box1中设置底部参考，它将在margin-bottom中应用20px。

http://jsfiddle.net/t5ooot7u/

#box1 {
    width:200px;
    height: 100px;
    background-color:gold;
    position: absolute;
    bottom:230px;
    left:100px;
    margin-bottom:20px;

}