CSS IE7 Z-Index 分层问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1287439/
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
IE7 Z-Index Layering Issues
提问by rezna
I've isolated a little test case of IE7's z-indexbug, but don't know how to fix it.
I have been playing with z-indexall day long.
我已经隔离了 IE7 的z-indexbug 的一个小测试用例，但不知道如何修复它。我z-index整天都在玩。
What is wrong with z-indexin IE7?
z-indexIE7 有什么问题？
Test CSS:
测试 CSS：
input {
border: 1px solid #000;
}
div {
border: 1px solid #00f;
}
ul {
border: 1px solid #f00;
background-color: #f00;
list-style-type: none;
margin: 0;
padding-left: 0;
z-index: 1000;
}
li {
color: #fff;
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
span.envelope {
position: relative;
}
span.envelope ul {
position: absolute;
top: 20px;
left: 0;
width: 150px;
}
Test HTML:
测试 HTML：
<form>
<label>Input #1:</label>
<span id="envelope-1" class="envelope">
<input name="my-input-1" id="my-input-1" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</span>
<br><br>
<label>Input #2:</label>
<span id="envelope-2" class="envelope">
<input name="my-input-2" id="my-input-2" />
</span>
</form>
回答by Eamon Nerbonne
Z-index is not an absolute measurement. It is possible for an element with z-index: 1000 to be behind an element with z-index: 1- as long as the respective elements belong to different stacking contexts.
Z-index 不是绝对测量值。具有 z-index: 1000 的元素可能位于具有 z-index: 1 的元素之后- 只要各个元素属于不同的stacking contexts。
When you specify z-index, you're specifying it relative to other elements in the same stacking context, and although the CSS spec's paragraph on Z-indexsays a new stacking context is only created for positioned content with a z-index other than auto(meaning your entire document should be a single stacking context), you didconstruct a positioned span: unfortunately IE7 interprets positioned content without z-index this as a new stacking context.
当您指定 z-index 时，您是在相对于同一堆叠上下文中的其他元素指定它，尽管CSS 规范中关于 Z-index 的段落说一个新的堆叠上下文仅为z-index 以外的定位内容创建auto（意味着你的整个文档应该是一个单一的堆叠上下文），你确实构造了一个定位范围：不幸的是，IE7 将没有 z-index 的定位内容解释为一个新的堆叠上下文。
In short, try adding this CSS:
简而言之，尝试添加此 CSS：
#envelope-1 {position:relative; z-index:1;}
or redesign the document such that your spans don't have position:relative any longer:
或重新设计文档，使您的跨度不再具有 position:relative ：
<html>
<head>
<title>Z-Index IE7 Test</title>
<style type="text/css">
ul {
background-color: #f00;
z-index: 1000;
position: absolute;
width: 150px;
}
</style>
</head>
<body>
<div>
<label>Input #1:</label> <input><br>
<ul><li>item<li>item<li>item<li>item</ul>
</div>
<div>
<label>Input #2:</label> <input>
</div>
</body>
</html>
See http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/for a similar example of this bug. The reason giving a parent element (envelope-1 in your example) a higher z-index works is because then all children of envelope-1 (including the menu) will overlap all siblings of envelope-1 (specifically, envelope-2).
有关此错误的类似示例，请参阅http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/。给父元素（在您的示例中为 envelope-1）一个更高的 z-index 工作的原因是因为所有信封 1（包括菜单）的子元素将与信封 1 的所有兄弟元素（特别是信封 2）重叠。
Although z-index lets you explicitly define how things overlap, even without z-index the layering order is well defined. Finally, IE6 has an additional bug that causes selectboxes and iframes to float on top of everything else.
尽管 z-index 可以让您明确定义事物如何重叠，但即使没有 z-index，分层顺序也是明确定义的。最后，IE6 有一个额外的错误，它会导致选择框和 iframe 浮动在其他所有内容之上。
回答by nixis
http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/
http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/
$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
回答by ed1nh0
In IE positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn't work correctly.
在 IE 中定位元素生成一个新的堆叠上下文，从 z-index 值 0 开始。因此 z-index 无法正常工作。
Try give the parent element a higher z-index value (can be even higher than the child's z-index value itself) to fix the bug.
尝试给父元素一个更高的 z-index 值（甚至可以高于子元素的 z-index 值本身）来修复错误。
回答by lukeroxout
I encountered this issue, but on a large project where HTML changes had to be requested and became a whole issue, so I was looking for a pure css solution.
我遇到了这个问题，但是在一个必须请求 HTML 更改并成为一个整体问题的大型项目中，所以我正在寻找一个纯 css 解决方案。
By placing position:relative; z-index:-1on my main body content my header drop down content suddenly displayed above the body content in ie7 (it was already displaying without issue in all other browsers and in ie8+)
通过放置position:relative; z-index:-1在我的主体内容上，我的标题下拉内容突然显示在 ie7 中的正文内容上方（它已经在所有其他浏览器和 ie8+ 中正常显示）
The problem with that was then this disabled all hover and click actions on all content in the element with the z-index:-1so i went to the parent element of the whole page and gave it a position:relative; z-index:1
问题在于，这禁用了元素中所有内容上的所有悬停和单击操作，z-index:-1因此我转到整个页面的父元素并给它一个position:relative; z-index:1
Which fixed the issue and retained the correct layering functionality.
这解决了问题并保留了正确的分层功能。
Feels a bit hacky, but worked as required.
感觉有点hacky，但按要求工作。
回答by eBar Solutions
I found that I had to place a special z-index designation on div in a ie7 specific styelsheet:
我发现我必须在 ie7 特定样式表中的 div 上放置一个特殊的 z-index 名称：
div { z-index:10; }
div { z-index:10; }
For the z-index of unrelated divs, such as a nav, to show above the slider. I could not simply add a z-index to the slider div itself.
用于在滑块上方显示不相关 div（例如导航）的 z-index。我不能简单地将 z-index 添加到滑块 div 本身。
回答by spheroid
If the previously mentioned higher z-indexing in parent nodes wont suit your needs, you can create alternative solution and target it to problematic browsers either by IE conditional comments or using the (more idealistic) feature detection provided by Modernizr.
如果前面提到的父节点中更高的 z-indexing 不适合您的需求，您可以创建替代解决方案并将其定位到有问题的浏览器，方法是通过 IE 条件注释或使用 Modernizr 提供的（更理想的）功能检测。
Quick (and obviously working) test for Modernizr:
Modernizr 的快速（并且显然有效）测试：
Modernizr.addTest('compliantzindex', function(){
var test = document.createElement('div'),
fake = false,
root = document.body || (function () {
fake = true;
return document.documentElement.appendChild(document.createElement('body'));
}());
root.appendChild(test);
test.style.position = 'relative';
var ret = (test.style.zIndex !== 0);
root.removeChild(test);
if (fake) {
document.documentElement.removeChild(root);
}
return ret;
});
回答by c2j
It looks like not a ie bug, just for diffrent understanding to the css standard. If outside container is not specified the z-index, but the inner element specified a higher z-index. So the container's sibling maybe overlay the high z-index element. Even if like that, it only occurs in IE7, but IE6, IE8 and Firefox is ok.
它看起来不是 ie 错误，只是为了对 css 标准的不同理解。如果外部容器未指定 z-index，但内部元素指定了更高的 z-index。所以容器的兄弟可能会覆盖高 z-index 元素。即使这样，它也只出现在 IE7 中，但 IE6、IE8 和 Firefox 都可以。
回答by Eamon Nerbonne
In IE6 in general, certain UI-elements are implemented with native controls. These controls are rendered in a completely separate phase (window?) and always appear above any other controls, regardless of z-index. Select-boxes are another such problematic control.
通常在 IE6 中，某些 UI 元素是使用本机控件实现的。这些控件在完全独立的阶段（窗口？）中呈现，并且始终显示在任何其他控件之上，无论 z-index 是什么。选择框是另一个有问题的控件。
The only way to work-around this issue is to construct content which IE renders as a seperate "window" - i.e. you can place a selectbox over a textbox, or, more usefully, an iframe.
解决此问题的唯一方法是构建 IE 呈现为单独“窗口”的内容 - 即您可以将选择框放置在文本框上，或者更有用的是 iframe。
In short, you'll need to put "on-hover" like things such as menu's in an iframe in order to let IE place these above built-in UI controls.
简而言之，您需要在 iframe 中放置诸如菜单之类的“悬停”，以便让 IE 将这些放置在内置 UI 控件之上。
This should have been fixed in IE7 (see http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx) but perhaps you're running in some kind of compatibility mode?
这应该已在 IE7 中修复（请参阅http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx）但也许您正在某种兼容模式下运行？
回答by Jeremy Kauffman
This bug seems to be somewhat of a separate issue than the standard separate stacking context IE bug. I had a similar issue with multiple stacked inputs (essentially a table with an autocompleter in each row). The only solution I found was to give each cell a decreasing z-index value.
与标准的单独堆叠上下文 IE 错误相比，此错误似乎是一个单独的问题。我有多个堆叠输入的类似问题（本质上是一个每行都有一个自动完成程序的表）。我找到的唯一解决方案是给每个单元格一个递减的 z-index 值。
回答by Marko
If you wanna create dropdown menu and having a problem with z-index, you can solve it by creating z-indexes of same value (z-index:999; for example).. Just put z-index in parent and child div's and that will solve problem. I solve the problem with that. If i put different z-indexes, sure, it will show my child div over my parent div, but, once i want to move my mouse from menu tab to the sub-menu div (dropdown list), it dissapear... then i put z-indexes of same value and solve the problem..
如果你想创建下拉菜单并遇到 z-index 的问题，你可以通过创建相同值的 z-indexes 来解决它（z-index:999；例如）。只需将 z-index 放在父和子 div 中，然后这将解决问题。我解决了这个问题。如果我放置不同的 z 索引，当然，它会在我的父 div 上显示我的孩子 div，但是，一旦我想将鼠标从菜单选项卡移动到子菜单 div（下拉列表），它就会消失......然后我放置了相同值的 z-indexes 并解决了问题..
