IE7 Z索引分层问题 [英] IE7 Z-Index Layering Issues
问题描述
我已经隔离了IE7的 z-index 错误的一小部分测试用例，但不知道如何解决它。
我一直玩 z-index 一整天。
z-index in IE7？
测试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;
}
测试HTML：
< pre class =lang-html prettyprint-override>
< form>
< label>输入＃1：< / label>
< span id =envelope-1class =envelope>
< ul>
< li> item< / li>
< li> item< / li>
< li> item< / li>
< li> item< / li>
< / ul>
< / span>
< br>< br>
< label>输入＃2：< / label>
< span id =envelope-2class =envelope>
< input name =my-input-2id =my-input-2/>
< / span>
< / form>
Z索引不是绝对量度。 z-index：1000的元素可以位于z-index：1 元素的后面 - 只要各个元素属于不同的堆栈上下文即可。
当您指定z-index时，您将指定它相对于同一堆叠上下文中的其他元素，并且尽管 CSS规范的Z-索引段落说，一个新的堆叠上下文仅为定位内容创建自动以外的z-index （意味着整个文档应该是单个堆叠上下文），您 构造了一个定位的跨度：不幸的是，IE7解释定位的内容，新的堆叠上下文。
简而言之，尝试添加此CSS：
＃envelope-1 {position：relative; z-index：1;}
或重新设计文档以使您的跨度不具有位置： relative any longer：
< 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>输入＃1：< / label> < input>< br>
< ul>< li> item< li> item< li> item< li> item< / ul>
< / div>
< div>
< label>输入＃2：< / label> < input>
< / div>
< / body>
< / html>
请参阅 http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer -z-index-bug / 这个bug的类似示例。给出父元素（在您的示例中为信封-1）较高的z-index工作的原因是因为那时信封-1的所有子（包括菜单）将与信封-1（具体地，信封-2）的所有兄弟重叠。
虽然z-index可让您明确定义重叠的方式，但即使没有z-index，分层顺序也很好定义。最后，IE6有一个额外的错误，导致选择框和iframe浮动在其他一切。
I've isolated a little test case of IE7's z-index bug, but don't know how to fix it.
I have been playing with z-index all day long.
What is wrong with z-index in IE7?
Test 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:
<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>
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.
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-index says 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 did construct a positioned span: unfortunately IE7 interprets positioned content without z-index this as a new stacking context.
In short, try adding this CSS:
#envelope-1 {position:relative; z-index:1;}
or redesign the document such that your spans don't have position:relative any longer:
<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).
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.
这篇关于IE7 Z索引分层问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
