当缩放菜单出现在 div 后面时，为什么？

Question

我有一个菜单，div 带有背景颜色。但是当缩放菜单时，div 会出现在后面。但它必须在缩放时将 div 向下推。 #blauwblok 必须是绝对位置，因为其他东西必须出现在 div 而不是菜单上。

<nav>
<ul>
    <li><a href="#">Doelstellingen</a></li>
    <li><a href="#">Producten</a></li>
    <li><a href="#">Klantcases</a></li>
    <li><a href="#">Company</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Resources</a></li>
</ul>
</nav>

<div id="blauwblok">
</div>


#blauwblok{
width: 100%;
background-color: #a2c1e8;
height: 13em;
position: absolute;

}

https://jsfiddle.net/rwx944qc/

Answer 1

您可以添加更高的 z-index 到 nav 元素。记住z-index 属性也需要设置一个位置：

#blauwblok {
  width: 100%;
  background-color: #a2c1e8;
  height: 13em;
  position: absolute;
}
nav {
  float: right;
  margin-right: 3em;
  margin-top: 2.5em;
  z-index: 10;/*add z-index*/
  position: relative;/*add position relative*/
}
@media (max-width: 1535px) {
  nav {
    margin-bottom: 1em;
  }
}
li {
  display: inline;
  margin-right: 1em;
}
a {
  text-decoration: none;
  color: black;
  font-family: "lato" sans-serif;
}

<nav>
  <ul>
    <li><a href="#">Doelstellingen</a>
    </li>
    <li><a href="#">Producten</a>
    </li>
    <li><a href="#">Klantcases</a>
    </li>
    <li><a href="#">Company</a>
    </li>
    <li><a href="#">Support</a>
    </li>
    <li><a href="#">Resources</a>
    </li>
  </ul>
</nav>

<div id="blauwblok">
</div>

z-index

Answer 2

尝试在您的导航元素上使用 position: relative 和更大的 z-index：

#blauwblok{
 width: 100%;
 background-color: #a2c1e8;
 height: 13em;
 position: absolute;
 z-index: 100;
}

nav{
    position: relative;
 float: right;
 margin-right: 3em;
 margin-top: 2.5em;
    z-index: 200;
}

@media (max-width: 1535px){
 nav{
  margin-bottom: 1em;
 }
}

li{
 display: inline;
 margin-right: 1em;

}



a{
 text-decoration: none;
 color: black;
 font-family: "lato" sans-serif;

}

<nav>
 <ul>
  <li><a href="#">Doelstellingen</a></li>
  <li><a href="#">Producten</a></li>
  <li><a href="#">Klantcases</a></li>
  <li><a href="#">Company</a></li>
  <li><a href="#">Support</a></li>
  <li><a href="#">Resources</a></li>
 </ul>
</nav>

<div id="blauwblok">
 </div>

Answer 3

绝对元素总是会脱离您的布局并在顶部可见。除了你有 parent div 和 relative 位置。

您也可以使用 z-index 将菜单置于蓝色框的顶部，但我建议 re-think 使用绝对定位。

Answer 4

我修好了。我删除了 float:right 并将其替换为 text-align:right.

当缩放菜单出现在 div 后面时，为什么？

When scaling menu comes behind the div, why?

html

css

media-queries