20

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

4

6 回答 6

17

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

.myLinkCssClass {
    background          : url(#);
}
于 2014-07-04T10:15:32.267 回答
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，因此我不会遭受 2 个元素共享同一个元素并使我的 HTML 无效的问题。

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

于 2010-01-12T09:35:42.610 回答
2

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

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

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

于 2009-07-20T22:02:55.533 回答
0

在您想要放在顶部的元素上创建并设置额外的透明背景图像。对我来说，它终于在 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);
    }
  }
于 2014-04-01T15:45:38.700 回答
0

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

于 2014-08-29T01:24:20.263 回答
0

I wanted to note that if you are using IE8 and below, it does not support CSS3 filters. This was my issue.

I was using:

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

No matter what I set my position or z-index to, you could not see the other layer because it was causing a complete mask over that layer (instead of going from clear to black and to clear again).

By removing the CSS3 filter for just IE8, I was able to solve my problem.

Hope this helps someone who runs into the same issue.

于 2013-09-27T14:43:42.193 回答