Question

I have two divs. First has position:absolute and another one has position:relative.

   <div class="first-div">
    abc
   </div>

   <div class="second-div">
   xyz
   </div>

The problem is in IE7 when hover the first div, the first div is under the second div. In CSS z-index:100; for first div and z-index:0; for the second div but it does not work. Any help to solve this issue?

For other browsers it’s working well, only in IE7 is this problem.

Answer 1

Apparently there is a z-index bug in IE 7. Setting the parent z-index to a higher value can fix the problem.

<div class="parent" style="position: relative; z-index:200;">
  <div class="first" style="position: absolute; z-index:100;"></div>

</div>
<div class="second"></div>

Something like that I suppose – without seeing some of your code it’s hard to tell.