Internet Explorer的z-index错误？

Question

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

- Paul

---

哪个版本？6？7？8？5.5（噢，恐怖）？6与7在处理z-index时略有不同，因此这是一个非常重要的细节。 - Tamas Czinege

Answer 1

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

.myLinkCssClass {
    background          : url(#);
}

- MagicSux

---

解决了我的问题！ - mohamnag

您是我的英雄，也是我讨厌 IE 的另一个理由。 - Jeremy Holovacs

我越来越相信IE浏览器开发人员故意制造了大量需要疯狂解决方案的错误。 - Pixelomo

你也可以使用数据URI：background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); - Evanss

这个类应该应用于哪个元素？你想要放在最前面的那个元素，还是相对定位的元素？ - Will Russell

请稍等...请提供一个使用此代码片段的示例。.myLinkCssClass是什么？ - JoshYates1980

Answer 2

我曾经遇到一个问题，这个特定的解决方法对它并不适用。这个问题有点难以解释，所以我会试着用代码来说明：

<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，因此我不会遇到两个元素共享同一个ID并使我的HTML无效的问题。

我认为可以将这种奇怪的现象归类为另一个bug，它恰好能帮助解决原始问题，但至少对我有效。希望有人会发现这很有用！

- Omri

Answer 3

你不会是在尝试覆盖一个下拉框（select标签）、iframe或flash动画吧？

在这些情况下，z-index就毫无用处了。

否则，请问你使用的是哪个浏览器版本，并且是否使用绝对定位？

- Yvo

---

那只对IE6及以下版本有效（幸运的是）。 - Tamas Czinege

你实际上可以在下拉框上方添加一个（不可见/0x0）iframe，这样它就能正常工作了。但这是一种不太优雅的hack方法。 - Jack Leow

Answer 4

我想指出的是，如果您使用的是IE8及以下版本，则不支持CSS3滤镜。这是我的问题所在。

我正在使用：

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

无论我将我的位置或z-index设置为什么，你都看不到另一层，因为它会在那一层上造成完全的遮罩（而不是从透明到黑色再到透明）。

通过仅针对IE8删除CSS3过滤器，我成功解决了我的问题。

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

- Termato

Answer 5

我在一个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的其他“姐妹”将保持正常定位，不会干扰布局。对我来说效果非常好！希望它也能帮到你。

- Pedro Alvares

Answer 6

创建并在要置于顶部的元素上设置一个额外的透明背景图像。对我来说，在IE8中最终起作用了。SASS：

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

- leymannx