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

我认为将这种古怪归类为另一种可能有助于原作的错误是安全的，但它起作用，至少对我而言。希望有人觉得这很有用！

Answer 4

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

我正在使用：

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

无论我将我的位置或z-index设置为什么，你都看不到另一层，因为它在该层上造成了一个完整的遮罩（而不是从清晰变为黑色再次清除）。

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

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

Answer 5

创建然后在要在顶部的元素上设置其他透明背景图像。对我来说，它最终在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);
    }
  }

Answer 6

我在html中遇到了同样的问题，其中许多重复的相对定位div阻止绝对定位div的视图。 www.brenelz.com提供的解决方法，我已经成功使用，但在这种情况下并没有工作。所以，以下对我有用：我从首先提到的那些div中删除了相对位置，然后添加了一个CSS来在悬停时将这些div转换为相对的div。我来告诉你代码：

在：

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

后：

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

这样其他人的姐妹＆＃39;该div保持正常定位并且不会干扰布局。它对我来说非常好用！我希望它对你也有所帮助。

Internet Explorer z-index错误？

6 个答案: