为什么固定标头会与未定位的同级标头一起移动？

理解固定元素行为：为什么固定标题会与未定位的同级元素一起移动

CSS 中的固定定位将元素放置在固定的元素中相对于视口的位置。但是，重要的是要了解视口是根据正常文档流中的元素计算的。

在提供的 HTML 中，标头元素是固定的，而主元素应用了 margin-top。当这些元素放置在文档中时，会发生以下情况：

1. 固定标题： 位置为固定的标题元素将从文档流中删除并放置在
2. 文档流计算： 从主元素开始，其余元素建立文档流。应用于主要元素的 margin-top: 90px 表示标题和主要内容之间的垂直间距。
3. 视口计算：视口是根据文档流中的元素计算的。由于第一个流入元素是 main 元素，其 margin-top 为 90px，因此视口从此时开始。
4. Margin Collapsing： body 元素，main 的父元素，默认边距为 8px。由于 CSS 边距折叠，main 的 margin-top (90px) 与 body 的 margin-top (8px) 折叠在一起，导致合并后的边距为 98px。

因此，两者即使标题固定在视口上，主元素和标题也会下移 98px。这是因为视口本身是根据文档流中的折叠边距进行调整的。

因此，重要的是要考虑到，虽然固定元素相对于视口定位，但视口的位置是由其中的元素决定的常规文档流程。这种理解解释了为什么固定标题可以与非定位同级元素一起移动。

以上是为什么固定标头会与未定位的同级标头一起移动？的详细内容。更多信息请关注PHP中文网其他相关文章！