我希望選單欄保持固定，但是當我使用 Position: Fixed 帖子被損壞并進入選單下方時，我應該怎么做才能將帖子向下滾動到選單下方一點。
我把我的代碼放在這里。
索引.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>
選單檔案
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;
}
uj5u.com熱心網友回復：
只需在第一段添加一些邊距：
header p {
margin-top: 100px; // example value
}
另請注意，當您將某個位置設定為 other 時static，請為 設定初始值top/bottom/left/right：
header {
top: 0;
left: 0;
right: 0;
}
uj5u.com熱心網友回復：
而不是使用固定，使用粘性：
header {
position: sticky;
top: 0;
}
uj5u.com熱心網友回復：
如果您將位置固定，其他所有內容都將忽略其邊界。所以下一個元素不知道它的高度。您需要向正文（或 .container）添加一個與標題高度相同的 padding-top。
body{
padding-top:180px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/337336.html