我希望菜单栏保持固定，但是当我使用Position: fixed时，帖子被损坏并进入菜单下，我该怎么做才能向下滚动帖子在菜单下方一点点
我把我的代码放在这里。
index . html
<body>
<header>
<div class="container">
<div class="logo">Lorem, ipsum dolor.</div>
<nav class="container-menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="/#about-section">about</a></li>
<li><a href="#">skills</a></li>
<li><a href="#">projects</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</div>
</header>
<p>
Lorem...
</p>
</body>
menu.css
html {
box-sizing: border-box;
border: 3px solid green;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
header {
border: 5px solid purple;
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
box-shadow: 0 3px 10px grey;
/* position: fixed; */
}
.container {
border: 3px solid goldenrod;
position: relative;
background: tomato;
top: 0;
width: 80%;
margin: 0 10%;
z-index: 999999;
}
给第一段加一些边距:
header + p {
margin-top: 100px; // example value
}
另外，请注意，当您将某个位置设置为static以外的位置时，请设置top/bottom/left/right的初始值:
header {
top: 0;
left: 0;
right: 0;
}
不使用fixed，而使用sticky:
header {
position: sticky;
top: 0;
}
如果您设置位置固定，则其他所有内容将忽略其边界。所以下一个元素不知道它的高度。你需要给body(或。container)添加一个与header相同高度的padding-top。
body{
padding-top:180px;
}