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

Question

我正在为我的世界历史课制作一个网站，我正在尝试为网站制作一个标题。不幸的是，标题与第一段重叠了。有没有办法在不改变位置的情况下解决这个问题?我需要固定这个位置。这是标题的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

如果你因为某些原因不得不保持固定的位置，你可以给菜单一个固定的高度，并将该值作为段落的上边距。

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

如果你不需要position: fixed(因为技术上你不需要，如果你只是想保持你的标题在顶部)，你可以使用position: sticky作为s.kuznetsov在评论中提到的，或者你可以只是取出位置，右，左和顶部属性。标题将留在顶部，段落将显示。

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