保证金规则如何适用于不在DOM流程中的元素？

Question

所以我问了这个问题：google chrome issue with fixed position and margin-top这让我意识到top和margin-top并不是一回事。我不知道这些年来我是如何错过的。

无论如何，让我想到margin-top和top之间究竟有什么区别，这就是我发现这个问题的方法：CSS: Top vs Margin-top。

我已经知道margin-top做了什么。但是我从来没有推断出这个想法“嗯，这个元素不在DOM流中，所以margin-top究竟是什么推动它离开？”

从我问的问题中我知道margin-top在应用于fixed位置的元素时会以非常意外的方式表现。至少在Chrome中这可能导致一些疯狂的规则（如margin-top: -273%;）。

所以我的问题是：做浏览器如何将margin规则应用于不在DOM流中的元素（即position值为fixed的元素或absolute。它们的应用和渲染方式如何导致规则，如上所述，实际上将内部的呈现在视口中？

Answer 1

top属性只是确定从包含元素顶部开始渲染框模型的距离。在position: fixed的情况下，这就是窗口本身。在position: absolute的情况下，它是具有非静态位置的下一个父元素。

另一方面，保证金是盒子模型本身的一部分。在框顶部添加边距会增加框上方的空白区域。

---

考虑position: fixed框的以下图层：

               top:10px
            margin-top:10px
------------border-top:1px------------
           padding-top:10px
  content

所有边距，边框和填充都是框模型的一部分。整个元素或“片段”在定位时只是一个大方块。因此，如果盒子顶部有10px的边距，并且从顶部开始放置元素10px，它将在窗口顶部和可见框开始之间具有20px的边距。

我还制作了very simple example in jsFiddle。

---

如果您喜欢图形，请参考此示例，其中红色框具有position: fixed：

正如您在第一部分中所看到的，元素上的仅设置position: fixed实际上并未将其移动到任何位置。它只是将其从文档流中删除。

在部分中，添加margin-top: 10px会使元素向下移动 10px，因为该框现在顶部有10px的边距。但是，实际上并没有移动到任何地方。由于盒子模型已经改变，盒子刚刚变高了。

在第三部分中，使用top: 10px 实际上将框从窗口容器的顶部移动到10px。它具有与第一部分完全相同的盒子模型。

第四节就像它上面的第二部分，除了负边距使它向上移动十个像素。盒子模型仍然更高，盒子仍然没有移动。

---

在元素上设置绝对位置时，如果未设置任何其他位置属性，则元素根本不会移动。因此，如果没有top，right，bottom或left属性集，则元素将保留在原来的位置，如果它已作为流动，它刚刚从流程中删除。因此，添加正面或负面的边距会使其看起来从该位置向上或向下移动。实际上，你只是在改变元素的盒子模型。

您还必须意识到，在上边距和下边距（甚至填充）上使用百分比与高度无关。它实际上使用宽度来计算出多少保证金。说margin-top: 10%将使该值为可用宽度的10％，而不是可用高度，并使其为负值将使该值无效。我之所以提到这一点，是因为它与你在margin-top使用百分比时所链接的第一个问题相关。

我希望这涵盖了您所寻找的内容。我无法分辨出你感到困惑的完全，所以我只是尽可能多地解释。