javascript - How can I prevent my fixed div from overlapping my other divs

Question

I'm making a website for my world history class and I am attempting to make a heading for the website. Unfortunately, the heading overlaps the first paragraph. Is there any way I can fix this without changing the position? I need the position to be fixed. This is the html for the header:

<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>

This is the 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;
}

Thank you for the help.

question from:https://stackoverflow.com/questions/65941683/how-can-i-prevent-my-fixed-div-from-overlapping-my-other-divs

Answer 1

If you have to keep the position fixed for some reason you can give the menu a fixed height and add that value as a top margin to the paragraph.

#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, and top properties. The header will stay at the top and the paragraph will show.

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