标题显示与相邻元素(HTML/CSS)重叠

Question

在我的网站中，我有这样的布局：

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

但是，标题与DIV重叠，好像DIV内容是Z-Index较低的背景元素。我可以通过更改HTML来解决此问题：

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

为什么会发生这种情况，并且有没有一种方法可以通过标头元素进行阻止行为？我已经玩弄了标头的位置，显示器，z索引等，但没有任何效果。

Answer 1

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

大多数浏览器都会以以下默认值显示元素：

header {
  display: block;
}

尝试从<nav>，<ul>和<li>删除/调整保证金/填充