Internet Explorer z 索引错误？

Question

如何将一个元素重叠到 Internet Explorer 中相对定位的另一个元素上？ Z-index 不起作用，它总是出现在相对定位元素的后面。

Answer 1

看起来我在开玩笑，但我不是

.myLinkCssClass {
    background          : url(#);
}

Answer 2

您绝对不会尝试将某些内容放在组合框（选择标签）、iframe 或 Flash 影片上，对吧？

在这些情况下，z-index 是一个失败的原因。

否则您使用什么浏览器版本并且使用绝对定位？

Answer 3

我对这个问题感到非常痛苦，因为这个特定的解决方法与此无关。 这有点难以解释，所以我将尝试使用代码：

<div id="first" style="z-index: 2">In between</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>

问题是，将父级的 z-index 设置为更高的值会将其移动到前台，而不是应有的位置。 我完全偶然发现了一个解决方案：我在其父元素之外复制了前景元素（id=third）。

<div id="first" style="z-index: 2">In between</div>
<div id="third" style="z-index: 3; visibility:hidden">Foreground</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>

值得一提的是，在我的原始代码中，元素没有 ID，因此我不会遇到 2 个元素共享同一个元素并使我的 HTML 无效的情况。

我认为可以安全地将这种奇怪的现象归类为另一个恰好对原始版本有所帮助的错误，但它确实有效，至少对我来说是这样。 希望有人觉得这很有用！

Answer 4

创建并在您想要放在顶部的元素上设置一个额外的透明背景图像。 对我来说，它终于在 IE8 中工作了。 SAS：

  #galerie-link {
    position: absolute;
    z-index: 1000;
    top: 25px;
    left: 40px;
    a {
      display: block;
      width: 185px;
      height: 90px;
      background-image: url(../images/transparent.png);
    }
  }

Answer 5

我想指出的是，如果您使用 IE8 及以下版本，它不支持 CSS3 过滤器。 这是我的问题。

我正在使用：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@black00', endColorstr='@black00', GradientType=0);

无论我将位置或 z 索引设置为什么，您都看不到其他图层，因为它会在该图层上造成完整的遮罩（而不是从透明变为黑色，然后再次透明）。

通过删除仅适用于 IE8 的 CSS3 过滤器，我能够解决我的问题。

希望这可以帮助遇到同样问题的人。

Answer 6

我在 html 中遇到了同样的问题，其中许多重复的相对定位 div 阻塞了绝对定位 div 的视图。 我已经成功使用过 www.brenelz.com 提供的解决方法，但在这种情况下不起作用。 所以，以下内容对我有用：
我从我首先提到的那些 div 中删除了相对定位，然后添加了一个 CSS 以在悬停时将这些 div 打开相对位置。 让我向您展示代码：

之前：

DivThatYouMustHover {
height: 300px;
position: relative;
width: 200px;
}

之后：

DivThatYouMustHover {
height: 300px;
width: 200px;
}
DivThatYouMustHover:hover {
position:relative;
}

这样该 div 的其他“姐妹”将保持正常定位，并且不会干扰布局。
这对我来说非常有效！ 我希望它也对你有帮助。