overflow with z-index

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.

still looking for answer if there is One! – Samih A Jul 15 '12 at 18:13 — Samih A, Jul 15 '12 at 18:13

score 3 · Answer 1 · answered Jul 14 '12 at 08:03

3

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

answered Jul 14 '12 at 08:03

yunzen

32,854
11
73
106

Drop that z-index. Whydo you have it anyway? – yunzen Jul 14 '12 at 08:25
z-index propert is necessary in my layout – Samih A Jul 14 '12 at 08:28
2

I think z-index is the reason. Try to drop it and look, if the problem is so solved. If it breaks your layout, you'll have to find a different approach to the layout. – yunzen Jul 14 '12 at 08:33
this is indeed the solution. You are covering the scrollbars with another object. – DA. Aug 02 '12 at 07:13

score 1 · Answer 2 · edited May 23 '17 at 10:34

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?

overflow with z-index

2 Answers2