使用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 class="container" id="layout-mainContent">
<div class="row" id="first-row">somecontent</div>
</main>
固定标头移动的原因如下:
要将标题移到视口的顶部,请使用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;
}
<div class="row" id="first-row">somecontent</div>