为什么固定位置的元件可以与其兄弟元件一起移动？

为什么固定位置元素会与其同级元素一起移动

尽管使用position:fixed从文档流中删除，但元素仍然可以受到其兄弟姐妹的影响。这是由于视口的计算方式造成的。

视口是浏览器窗口内用户可见的区域。它是使用流入元素计算的，这些元素是参与常规文档流的元素。

在提供的 HTML 中，第一个流入元素是

，它有一个 margin-top ：90 像素。由于

元素是固定的，在视口计算中不考虑它。

但是，

上的默认边距 8px 是固定的。元素在

上折叠并带有边距。这会导致两个元素向下移动 90px，影响固定标题的位置。

要解决此问题，只需将 top: 0 添加到标题 CSS 中，将其放置在视口的顶部，独立于兄弟元素的边距。

以上是为什么固定位置的元件可以与其兄弟元件一起移动？的详细内容。更多信息请关注PHP中文网其他相关文章！