标题显示与相邻的元素（HTML / CSS）重叠

Question

In my website, I have a layout like this:

<header>
    {Dropdown nav menu consisting of <nav>, <ul> and <li> }
</header>
<div>
    {content}
</div>

However, the header overlaps with the div, as if the div content were a background element with a lower z-index. I can fix this by changing the HTML:

<div>
    {Dropdown menu consisting of <nav>, <ul> and <li> }
</div>
<div>
    {content}
</div>

Why does this happen, and is there a way to get blocking behavior w/ the header element? I've toyed w/ the header's position, display, z-index, etc but haven't been able to have any effect.

Answer 1

Per https://www.w3schools.com/tags/tag_header.asp :

Most browsers will display the element with the following default values:

header {
  display: block;
}

Try removing/adjusting margin/padding from the <nav> , <ul> and <li> until you discover what is throwing your layout off.