相关疑难解决方法(0)

关于如何解决这个问题(添加top: 0),有很多关于SO的问题,但没有一个问题试图解释标题运动背后的原因.我更好奇为什么会这样.

<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.
}

类似问题清单,但没有任何理由:

1. 最顶层的"固定"位置div与非位置div一起移动
2. 保证金影响其他固定元素头寸
3. margin-top div导致固定标题div向下移动

认为固定标题粘在浏览器窗口的顶部并且不应该因为另一个非定位的非子,非父div(也称为兄弟)而移动似乎是合理的.ESP.因为固定标题超出正常文档流程.关于固定定位的MDN

假设: 混淆源于固定元素相对于浏览器窗口的想法.这是事实,但是使用视口计算.视口使用常规文档流中的元素计算.因为文档流中的第一个div是非标题div,所以视口在应用margin-top之后开始.这只是猜测,我很乐意看到有人确认或纠正我.