Internet Explorer z-index 错误？

Posted 2023-03-06

【中文标题】Internet Explorer z-index 错误？

【英文标题】：Internet Explorer z-index bug?

【发布时间】：2010-11-12 11:23:07

【问题描述】：

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

【问题讨论】：

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

【参考方案1】：

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

【参考方案2】：

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

我正在使用：

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

无论我将位置或 z-index 设置为什么，您都看不到另一层，因为它会在该层上造成一个完整的蒙版（而不是从透明变为黑色并再次清除）。

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

希望这对遇到同样问题的人有所帮助。

【参考方案3】：

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

.myLinkCssClass 
    background          : url(#);

【讨论】：

解决了我的问题！

你是我的英雄；还有一个讨厌 IE 的理由。

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

你也可以使用数据 uri: background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAAAAAAEAAAIBRAA7);

这个类应该应用于什么元素？您要定位在前面的那个，还是定位为相对的元素？

【参考方案4】：

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

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

【参考方案5】：

这个问题与这个特殊的解决方法无关，我真的很痛苦。这有点难以解释，所以我将尝试使用代码：

<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 无效的困扰。

我认为将这种怪异现象归类为恰好有助于解决原始问题的另一个错误是安全的，但它确实有效，至少对我来说是这样。希望有人觉得这很有用！

【参考方案6】：

您不会试图在组合框（选择标签）、iframe 或 Flash 电影上放置一些东西，对吧？

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

否则你用的是什么浏览器版本，你用的是绝对定位吗？

【讨论】：

这（幸运的是）只适用于 ie6

您实际上可以在应该通过组合框的内容之前添加一个（不可见/0x0）iframe，它会起作用。虽然这是一个肮脏的黑客。