如何防止我的固定 div 與其他 div 重疊

Question

我正在為我的世界歷史 class 制作一個網站，並且我正在嘗試為該網站制作一個標題。 不幸的是，標題與第一段重疊。 有什么辦法可以在不更改 position 的情況下解決這個問題？ 我需要修復 position。 這是 header 的 html：

<div id="menu">
<a href="#about">About</a>
<a href="#donatello">Donatello</a>
<a href="#michelangelo">Michelangelo</a>
<a href="">Martin Luther</a>
<a href="">Henry VIII</a>
<a href="">Mary Wollstonecraft</a>
<a href="">Francis Bacon</a>
<a href="">Isaac Newton</a>
<a href="">Galileo Galilei</a>
<a href="">Marquis de Lafayette</a>
</div>

這是 css：

#menu{
padding:30px;
background:#000;
border:5px solid #000000;
border-radius:0px;
position:fixed;
z-index:1;
right:0px;
left:0px;
top:0px;
text-align:center;
}

感謝您的幫助。

Answer 1

如果由於某種原因您必須保持 position 固定，您可以給菜單一個固定的高度並將該值作為上邊距添加到段落。

#menu{
...
max-height: 100px;
}

p{
margin-top: 100px;
}

If you don't need position: fixed (because technically you don't if you just want to keep your header up top) you can use position: sticky as s.kuznetsov mentioned in comments or you can just take out position, right, left 和 top 屬性。 header 將停留在頂部並顯示段落。

#menu{
padding:30px;
background:#000;
border:5px solid #000000;
border-radius:0px;
z-index:1;
text-align:center;
}