绝对定位div没有正确堆叠IE

Question

我的代码类似于以下内容：

<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%;
}

基本上，当有人在叠加div上盘旋时，会显示该div的内容。 这在每个浏览器中都很有用，除了IE（当然）

在IE中，叠加div位于图像后面，因此悬停不起作用。 如果在叠加div上放置背景（颜色或图像），它将定位在图像上并工作，但我想避免使用背景。

我也尝试过使用z-index，但没有成功。即使有更高的z索引，并且在定义的z索引堆栈中（对于IE），它仍然在图像后面。

这是所有IE版本6-9。

有没有人知道这方面的解决方法/修复方法？

Answer 1

你可以通过技巧来修复它。将叠加div的背景设置为完全透明的图像（png）。