使用
position: fixed，您的
header元素将从文档流中删除。
第一个流入元素是
main，它
margin-top: 90px在您的代码中。
此元素的父元素是
body，通常具有默认值
margin:8px。
由于CSS 保证金崩溃，该
body元素的
margin-top: 8px被折叠与
main元素
margin-top: 90px。
结果，这两个现在具有相同边距的元素下移了90px。
html { background-color: green; height: 100%; }body { background-color: pink; height: 100%;}header { position: fixed; border: 1px solid red;}main { margin-top: 90px; background-color:yellow;}<header>Project Header</header><main id="layout-mainContent"> <div id="first-row">somecontent</div></main>固定标头移动的原因如下：
- 尽管元素的包含块
position: fixed
是视口… - 的CSS偏移性（
top
，bottom
，left
和right
）具有的初始值auto
，其保持在那里它通常将是如果它是在文档流动的元件。 - 换句话说，当您将元素设置为
position: absolute
或position: fixed
（的另一种形式position: absolute
）时，您正在指定所需的定位类型… 但是您并未将其定位在任何地方。 - 直到您定义元素实际定位的偏移量。
要将标题移到视口的顶部，请使用
top: 0
。html {
background-color: green;height: 100%;
}
body {
background-color: pink;height: 100%;
}
header {
position: fixed;
border: 1px solid red;
top: 0px; / NEW /
}
main {
margin-top: 90px;
background-color:yellow;
}
Project Header <div id="first-row">somecontent</div>
