IE > 7 中的另一个“z-index not working”，研究后找不到答案

Question

我到处寻找，找到了很多文章，解释了 IE 7,8 和 9 z-index 问题的工作，但这些案例都没有解决我的问题。

问题是我在页面中间有用户可以与之交互的内容，但我不希望用户在页面加载 2 秒后才能进行交互（不需要帮助）。所以我使用了一个拦截器作为解决方案，一个位于 HTML 中动画内容上方的 div，具有绝对位置，并覆盖用户交互，因此您不能将鼠标悬停在动画上。

这适用于 Chrome 和 Firefox，但所有 IE 都存在 z-index 问题。

我确保每个父元素都有相对或绝对的位置，甚至尝试使父容器具有更高的索引，反之亦然。有没有人遇到过这样的问题？

我不能显示私人事务的代码，但我希望我已经解释得足够透彻了。

有任何问题，请告诉我。

Answer 1

在 IE 中，我注意到即使将父元素设置为相对位置和/或绝对位置，并且它们的 z-index 低于阻止 div （这是正常修复），阻止 div 仍然被堆叠为单个索引，因此不会堆叠在上面的其他元素上。我注意到的另一个问题是，当您将阻止程序背景颜色设置为一种颜色时，z-index 堆栈会起作用，并且您无法与较低的 z-index 元素进行交互。但是，当您将空拦截器设置为透明时，z-index 将不会与其他元素堆叠（错误）。

这是一个适用于所有 IE 浏览器的解决方法 *如果您尝试使用 空 div 来阻止用户交互（否则，上述方法应该有效）：

CSS

#blocker {
    position:absolute;
    width: 100%;
    height: 200%;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    z-index:9999;
    background-image: url('/cont-img/Transparent.gif');
    background-repeat:repeat;
}

1. 下载像 opacity 0 一样工作的透明 gif，但适用于所有 IE 浏览器：transparent.gif
2. 重复 gif 背景，使其在上述元素上重复 x&y

HTML

    <!-- place empty blocker div BELOW content trying to block -->
    <div id="blocker"></div>