我在这个 jsFiddle 中有两个 div - http://jsfiddle.net/z4062jfn/ - 绝对定位。我没想到赋予 div 的任何边距值会影响它们的绝对位置。这对于赋予顶部 div 的 margin-bottom 值是正确的（取消注释 CSS 的第 8 行）。但是为底部框指定的 margin-top 值（取消注释 CSS 的第 19 行）确实将底部 div 位置向下移动了该数量。
在这种情况下，什么情况下可以让保证金规则覆盖绝对头寸规则 - 有时？
<div id="box1"><p>box 1</p></div>
<div id="box2"><p>box 2</p></div>
【问题讨论】：
为什么会发生这种情况的简单事实解释是偏移属性top、right、bottom 和left 实际上尊重每一侧的相应边距属性。 spec 表示这些属性指定框的 margin edge 与该特定边的偏移距离。边距边缘在section 8.1 中定义。
因此，当您设置顶部偏移量时，会考虑上边距，而当您设置左侧偏移量时，会考虑左边距。
如果您设置了底部偏移而不是顶部，您会看到底部边距生效。如果您随后尝试设置上边距，则上边距将不再有任何效果。
如果您设置 both 顶部和底部偏移量，both 顶部和底部边距，and 一个高度，那么这些值将超过- 约束并且底部偏移没有效果（反过来，底部边距也没有）。
如果您想了解为什么规范以这种方式定义偏移量，而不是为什么浏览器会以这种方式运行，那么它主要是基于意见的，因为您将得到的只是推测。也就是说，Fabio's explanation 很合理。
【讨论】：
因为一个绝对定位的盒子被从正常流程中移除，并被分配了一个相对于包含块的位置。如果你没有定义包含块，那么它就是body。
因此，考虑到这一点，将包含块视为从左上角开始的坐标轴。如果你给你的元素这个属性：
position: absolute;
top:100px;
left:100px;
就像你做的那样，你会在上面和左边留下一个空白空间，因此，如果你应用 margin-top 或 margin-left，它会起作用，因为你的元素实际上能够穿过两个轴的每个像素最多 100px 顶部和 100px 左侧位置，同样适用于负边距。然而，由于position:absolute 将元素从流中移除并且对任何后续兄弟元素产生任何影响，很容易看出元素“完成”后不会发生任何事情，因此 margin-bottom 和 margin-right 将不起作用，因为它们没有任何东西可以从中获得利润。
我制作了一张图片来展示这种行为，因为我的解释可能有点晦涩
【讨论】：
body。另请注意，如果您设置了底部和右侧偏移量，则底部和右侧边距可以并且确实对弃置框本身（同样，不是任何其他流入框）产生影响。
您的margin bottom 无法正常工作，因为您将top 属性放在您的div 中。删除top，您的margin bottom 将适用于您的#box1。
【讨论】：
保证金底部也有影响。请看下面的代码，如果你在#box1 中设置了底部引用，它将在margin-bottom 中应用20px。
#box1 {
width:200px;
height: 100px;
background-color:gold;
position: absolute;
bottom:230px;
left:100px;
margin-bottom:20px;
}
【讨论】：