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>

Answer 2

此行为不仅限于a元素。如果将它们更改为按钮，您将遇到同样的问题。基本上，您可以看到具有负z-index的元素，但无法与它们进行交互。（有关使用按钮的示例，请参阅 http://jsfiddle.net/bhxem01j/1/ 。）

快速修复可能是将z-index应用于所有元素，然后将较小（但非负）的z-index应用于.boxes：

* {
  ...
  position: relative;
  z-index: 1;
}

.boxes {
  ...
  z-index: 0;
}

由于z-index仅适用于定位元素，因此我将position: relative添加到*样式。

Z-index渲染链接不可点击

2 个答案: