为什么固定元素会受到未定位同级元素的影响？

理解固定元素的行为：为什么它们会受到非定位同级元素的影响

在CSS定位领域，它出现了令人困惑的是为什么具有position:fixed的元素会受到非定位同级元素的影响。然而，理解底层机制揭示了一个合乎逻辑的解释。

带有position:fixed的元素将从正常文档流中删除并相对于浏览器视口定位。视口是网页在浏览器窗口内的可见区域。

在您提供的示例中，标题元素是固定的，而主元素的 margin-top: 90px。令人惊讶的是，标题向下移动，就好像它受到边距的影响一样。

要理解这种行为，我们必须考虑 CSS 边距折叠的作用。当两个有边距的元素接触时，它们的边距合并为一个边距。在本例中，body 元素（主元素的父元素）的默认边距为 8px。当应用主元素的 margin-top 90px 时，会发生边距折叠，导致组合边距为 98px。

此组合边距将主体元素和主元素向下移动 98px。由于标题相对于视口是固定的，因此它会随着视口移动，视口是根据文档流中的元素计算的。由于主元素是第一个流入元素，其边距会影响视口的计算，导致 header 看起来向下移动。

本质上，固定 header 的位置并不会直接受到非固定 header 的影响。 - 在身体定位方面定位兄弟姐妹。然而，同级的边距会影响视口计算，间接影响标题的明显移动。

以上是为什么固定元素会受到未定位同级元素的影响？的详细内容。更多信息请关注PHP中文网其他相关文章！