SO上有很多问题涵盖了如何解决此问题的答案(添加top: 0),但没有一个试图真正解释标题运动背后的原因。我更奇怪为什么会这样。
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. }
可以认为固定标头停留在浏览器窗口的顶部,并且不应由于另一个未定位,非子,非父div(又称为同级)而移动。Esp。因为固定的标头不在正常的文档流中。 假设: 混淆源于固定元素是相对于浏览器窗口的想法。这是正确的,但是是使用视口计算的。视口是使用常规文档流中的元素计算的。由于文档流中的第一个div是非标题div,因此视口将在应用margin-top之后启动。这只是猜测,我希望看到有人确认或纠正我。
使用position: fixed,您的header元素将从文档流中删除。
position: fixed
header
第一个流入元素是main,它margin-top: 90px在您的代码中。
main
margin-top: 90px
此元素的父元素是body,通常具有默认值margin:8px。
body
margin:8px
由于CSS 保证金崩溃,该body元素的margin-top: 8px被折叠与main元素margin-top: 90px。
margin-top: 8px
结果,这两个现在具有相同边距的元素下移了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 class="container" id="layout-mainContent"> <div class="row" id="first-row">somecontent</div> </main>
固定标头移动的原因如下:
top
bottom
left
right
auto
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 class="row" id="first-row">somecontent</div>