Z索引溢出

Question

I have the following HTML markup

<div id="main">
 <div id="div1" style="position:relative;"></div>
 <div id="div2" style="z-index:-1; position:relative; overflow:auto; height:500px;"></div> 
</div>

In div2 I load data dynamically and the content could exceed the divs height, so I used a overflow:auto property to show a scrollbar. The problem is that the scrollbar appears in all browsers, but it is working just in IE8/9, FireFox and Chrome. In other browsers you see the scrollbar, but without functionality.

Answer 1

Your div2 has z-index of -1. So it is behind. That's why it does not work.

Answer 2

I had a similar issue and found that the negative z-index was indeed the problem and that a positive z-index was the solution. Try setting the z-index of div2 to 0 or some positive value X and then set the z-index of your other elements to a z-index that's greater than 0 or X. A negative z-index causes an item to be "below" the level of mouse interaction, thus the new z-indicies will cause div2 to be behind other content with a higher z-index while still allowing for mouse interaction.

See this question for more detail: Weird z-index behaviour preventing mouse interactions: bug or normal?