Html 为什么具有位置的元素：与未定位的同级元素一起移动是固定的？

关于S.O.有很多问题，包括如何解决这个问题的答案（添加

top:0

），但没有一个问题试图真正解释页眉移动背后的原因。我更想知道为什么会这样

<header>Project Header</header> 
<main class="container" id="layout-mainContent">
    <div class="row" id="first-row">somecontent</div>
</main>

header {
   position: fixed;
}

#layout-maincontent {
   margin-top: 90px;  //moves header down.
}

项目标题
一些内容
标题{
位置：固定；
}
#布局主要内容{
页边距顶部：90px；//向下移动页眉。
}

类似问题列表，但没有理由：

似乎有理由认为，由于另一个非定位、非子级、非父div（也称为同级），固定标题会粘附在浏览器窗口的顶部，不应移动。特别是因为固定标题超出了正常的文档流

假设：

---

这种混淆源于固定元素相对于浏览器窗口的想法。这是正确的，但使用视口进行计算。视口是使用常规文档流中的元素计算的。因为文档流中的第一个div是非页眉div，所以视口在应用页边距顶部后开始。这只是猜测，我希望看到有人确认或纠正我。

使用

位置：fixed

，您的

标题

元素将从文档流中删除

流程元素中的第一个元素是

main

，它在代码中具有

margin top:90px

此元素的父元素是

body

，它通常具有默认的

边距：8px

（请参阅）

由于CSS，

主体

元素的

页边距顶部：8px

与

主

元素的

页边距顶部：90px

一起折叠

结果，两个元素，现在有相同的边缘，向下移动90像素

html{
背景颜色：绿色；
身高：100%；
}
身体{
背景颜色：粉红色；
身高：100%；
}
标题{
位置：固定；
边框：1px纯红；
}
主要{
边缘顶部：90像素；
背景颜色：黄色；
}

项目标题
一些内容

假设body是header和main的直接祖先/容器。使用display:flow-root在body上会将标题放在它的顶部和下方。你能详细说明一下吗？在父容器上设置

overflow:auto

，同时启动一个新的块格式上下文怎么样？@daGo页边距仅对属于同一块格式上下文的框进行折叠。设置display:flow root时，您将创建新的块格式上下文，以便父元素和子元素的边距不会折叠。@mix3d当您在主体上设置overflow属性的“auto”时，该值将传播到视口，主体仍使用初始的“visible”值。要停止传播并真正为主体上的溢出设置非初始“可见”值，您需要对html元素执行相同的操作。