8

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

无论如何，这让我思考和之间到底有什么区别margin-top，top这就是我发现这个问题的方式：CSS：Top vs Margin-top。

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

从我问的问题中，我知道margin-top当应用于具有fixed位置的元素时，它的行为方式非常出乎意料。至少在 Chrome 中，这可能会导致一些疯狂的规则（如margin-top: -273%;）。

所以我的问题是：浏览器如何将规则margin应用于不在 DOM 流中的元素（即position值为fixedor的元素absolute。以及它们的应用和呈现方式如何导致规则，就像上面描述的那样，实际呈现元素在视口内？

4

1 回答 1

3

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

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

考虑一个position: fixed盒子的以下层：

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

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

我还在jsFiddle 中做了一个非常简单的例子。

如果您喜欢图形，请看这个例子，红色框有一个position: fixed：

视觉示例

正如您在第一部分中看到的那样，仅对元素进行设置position: fixed实际上不会将其移动到任何地方。它只是将其从文档流中删除。

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

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

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

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

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

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

于 2013-02-14T22:45:40.957 回答