Absolute positioned div not stacking correctly IE

I have code similar to the following:

<div class="container">
   <div class="overlay">
      // hover content
   </div>
   <img/>
</div>

.container{
    position:relative;
}
.overlay{
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

Basically, when someone hovers on the overlay div the content of that div is displayed. This works great in every browser, except IE (of course)

In IE it the overlay div is behind the image, so the hover doesn't work. If put a background (color or image) on the overlay div it will position over the image and work, but I want to avoid using a background.

I have also tried working with the z-index, with no success. Even with a higher z-index, and in a defined z-index stack (for IE), it still is behind the image.

This is in all IE versions 6-9.

Does anyone know any workarounds/fixes for this?

Answers


you can fix it by a trick.set the background of overlay div to a completely transparent image(png).


Need Your Help

End of array in variable in julia

arrays julia

I would like to slice an array a in Julia in a loop in such a way that it's divided in chunks of n samples. The length of the array nsamples is not a multiple of n, so the last stride would be shor...

Remove Application folder by uninstalling setup project

c# wpf setup-project

I have a wpf application and I have created setup project for that.