我的负 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>
最佳答案
更新
只需在 .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>
关于javascript - Z-index渲染链接不可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26487284/