html - 菜单项不可点击

Question

我在封面 div 中有菜单 div，当我尝试单击它时我不能。我也尝试使用 z-index:-1 作为掩护，但没有任何反应。当我将某些东西放在封面 div 之外时，我可以点击它。

#cover {
   position:relative;
   margin:auto;
   width:100%;
   height:800px;
   z-index: -1;
   background-image: url('pozadinaa.png');
   background-size: cover;
}

#meni {
   position:absolute;
   width: auto;
   font-size:50px;
   cursor:pointer;
   color:white;
    right:4%;
    top:5%;
}

Answer 1

删除 z-index(您正在为 #cover 设置此项，因此 #menu 也受此影响)。

#cover {
  position: relative;
  margin: auto;
  width: 100%;
  height: 200px;
  background-image: url('pozadinaa.png');
  background-size: cover;
}
#cover.zindex {
  z-index: -1;
}
#menu {
  position: absolute;
  width: auto;
  font-size: 50px;
  cursor: pointer;
  color: white;
  right: 4%;
  top: 5%;
}

<h1>Clickable</h1>
<div id="cover">cover
  <div id="menu">
    <a href="#">link1</a>
    <a href="#">link2</a>
    <a href="#">link3</a>
  </div>
</div>
<h1>Not clickable (z-index = -1)</h1>
<div id="cover" class="zindex">cover
  <div id="menu">
    <a href="#">link1</a>
    <a href="#">link2</a>
    <a href="#">link3</a>
  </div>
</div>