Z-index渲染链接不可点击

Question

My negative z-index is causing the links to be unclickable even though there are no other elements above it. I can't figure out what is causing the issue. I've removed all other elements on the page and it still exists happens. What is covering the links?

 #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

Update

Just add a wrapper around the .boxes and add overflow: scroll; and height to it :)

 #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

This behavior is not limited to a elements. You'll have the same problem if you change them to buttons. Basically, you can see elements with a negative z-index, but you cannot interact with them. (See http://jsfiddle.net/bhxem01j/1/ for an example using buttons.)

A quick fix may be to apply a z-index to all elements, then a smaller (but non-negative) z-index to .boxes :

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

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

Since z-index applies to positioned elements only, I added position: relative to the * styles.