边距规则如何应用于不在 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%;）。

所以我的问题是：do 浏览器如何将 margin 规则应用于不在 DOM 流中的元素（即具有 position 值为 fixed 或 absolute 的元素。还有什么关于它们被应用和渲染的方式会导致规则，就像上面描述的那样，实际上渲染元素 inside view-port？

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 实际上不会将其移动到任何地方。它只是将其从文档流中删除。

在 section 部分中，添加 margin-top: 10px 会使元素向下移动 10px，因为框现在顶部有 10px 的边距。然而，它实际上并没有移动到任何地方。盒子变高了，因为盒子模型变了。

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

第四部分类似于它上面的第二部分，除了负边距导致它向上移动十个像素。盒子模型还是比较高的，盒子还没有动。

---

当您在元素上设置绝对位置时，如果您不设置任何其他位置属性，则元素根本不会移动。因此，如果没有 top、right、bottom 或 left 属性集，该元素将保持在它作为流的一部分呈现时应该所处的位置，它现在刚刚从流量。因此，添加一个边距，无论是正数还是负数，都会使其看起来从该位置向上或向下移动。实际上，您只是在更改元素的盒子模型。

您还必须意识到，在顶部和底部边距（甚至填充）上使用百分比与高度无关。它实际上使用 width 来计算有多少边距。说 margin-top: 10% 将使该值成为可用宽度的 10%，而不是可用高度，并将其设为负只会否定该值。我提到这一点是因为它与您链接的第一个问题有关，您在 margin-top 中使用百分比。

我希望这涵盖了您正在寻找的内容。我不知道究竟你对什么感到困惑，所以我只是尽可能多地解释了。