Html Internet Explorer z-index 错误？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1156192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Internet Explorer z-index bug?
提问by
How do you overlap an element over another element that is positioned relatively in Internet Explorer? Z-index doesn't work, it always appears behind the relatively positioned element.
如何在 Internet Explorer 中相对定位的另一个元素上重叠一个元素？Z-index 不起作用，它总是出现在相对定位的元素后面。
回答by MagicSux
Looks like I'm kidding, but I am not
看起来我在开玩笑，但我不是
.myLinkCssClass {
background : url(#);
}
回答by Zyphrax
You're not by any chance trying to put something over a combobox (select tag), iframe or flash movie right?
您绝不会试图在组合框（选择标签）、iframe 或 Flash 影片上放置一些东西，对吗？
In those cases z-index is a lost cause.
在这些情况下，z-index 是一个失败的原因。
Otherwise what browser version are you using and are you using absolute positioning?
否则您使用的是什么浏览器版本并且您使用的是绝对定位？
回答by Omri
I had a real pain with this problem that this particular workaround wasn't relevant for. It's a little hard to explain so I'll try using code:
我对这个与此特定解决方法无关的问题感到非常痛苦。这有点难以解释，所以我会尝试使用代码：
<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>
The problem is that setting the parent's z-index to a higher value would move it to the foreground instead of the back where its supposed to be. I stumbled upon a solution completely by accident: I made a copy of the foreground element (id=third) outside its parent.
问题是将父级的 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>
Its worth mentioning that in my original code the elements don't have IDs so I don't suffer from 2 elements sharing the same one and invalidating my HTML.
值得一提的是，在我的原始代码中，元素没有 ID，因此我不会遭受 2 个元素共享同一个元素并使我的 HTML 无效的困扰。
I think its safe to classify this weirdness as another bug that happens to help with the original, but it works, at least for me. Hope somebody finds this useful!
我认为将这种怪异归类为碰巧有助于原始错误的另一个错误是安全的，但它有效，至少对我而言。希望有人觉得这很有用！
回答by Termato
I wanted to note that if you are using IE8 and below, it does not support CSS3 filters. This was my issue.
我想指出的是，如果您使用的是 IE8 及以下版本，则它不支持 CSS3 过滤器。这是我的问题。
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).
无论我将我的位置或 z-index 设置为什么，您都看不到另一层，因为它在该层上造成了一个完整的蒙版（而不是从透明变为黑色并再次清除）。
By removing the CSS3 filter for just IE8, I was able to solve my problem.
通过仅为 IE8 删除 CSS3 过滤器，我能够解决我的问题。
Hope this helps someone who runs into the same issue.
希望这可以帮助遇到同样问题的人。
回答by leymannx
Create and then set an additional transparent background image on the element you want to have on top. For me it finally worked in IE8. SASS:
创建并设置一个额外的透明背景图像在你想要在顶部的元素上。对我来说，它终于在 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);
}
}
回答by Pedro Alvares
I had the same problem in an html where many repeated relative positioned divs were blocking absolute positioned div's view. The workaround provided by www.brenelz.com, that I've already used with success wasn't working in this case. So, the following worked for me: I removed the relative positioning from those divs I've mentioned first, then added a CSS to turn those divs on relative when hover. Let me show you the code:
我在 html 中遇到了同样的问题，其中许多重复的相对定位的 div 阻止了绝对定位的 div 的视图。www.brenelz.com 提供的解决方法，我已经成功使用过，但在这种情况下不起作用。因此，以下对我有用：我从我首先提到的那些 div 中删除了相对定位，然后添加了一个 CSS 以在悬停时将这些 div 置于相对位置。让我向您展示代码：
Before:
前：
DivThatYouMustHover {
height: 300px;
position: relative;
width: 200px;
}
After:
后：
DivThatYouMustHover {
height: 300px;
width: 200px;
}
DivThatYouMustHover:hover {
position:relative;
}
This way the others 'sisters' of that div stay with normal positioning and don't interfere with the layout. It worked very well for me! I hope it helps you too.
这样，该 div 的其他“姐妹”保持正常定位，不会干扰布局。它对我来说非常有效！我希望它也能帮助你。
