javascript - Z-index渲染链接不可点击

Question

我的负 z-index 导致链接无法点击，即使它上面没有其他元素。我不知道是什么导致了这个问题。我已经删除了页面上的所有其他元素，但它仍然存在。什么覆盖了链接？

#scrollingdiv {
  width: 100%;
  margin-top: 50px;
  overflow: scroll;
  height: 200px;
  white-space: nowrap;
}

.boxes {
  height: 300px;
  width: 100px;
  background-color: green;
  display: inline-block;
  z-index:-2;
  position:relative;
}

<div id='scrollingdiv'>


  <div style='margin-top:40px'></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
<br/><a href='#'>link</a>


</div>

Answer 1

更新

只需在 .boxes 周围添加一个包装器并添加 overflow: scroll;和它的高度:)

#scrollingdiv {
  width: 100%;
  margin-top: 50px;  
  height: 200px;
  white-space: nowrap;
}
.boxes-wrap{
  overflow: scroll;
  height: 150px;
}
#banner {  
  width: 5000px;
  height: 50px;
  background-color: red;
  /* z-index:-1; */
}
.boxes {
  height: 300px;
  width: 100px;
  background-color: green;
  display: inline-block;
  /* z-index:-2;
  position:relative; */
}

<div id='scrollingdiv'>


  <div id='banner'>HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER</div>

<div class="boxes-wrap">   
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
  <div class='boxes'>box<br/><a href='#'>link</a></div>
<br/><a href='#'>link</a>
</div>

</div>