绝对定位的 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-index，并且在定义的 z-index 堆栈中（对于 IE），它仍然位于图像后面。

这是在所有 IE 版本 6-9 中。

有没有人知道任何解决方法/修复这个问题？

Answer 1

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