我隔离了 IE7 的一个小测试用例z-indexbug，但不知道如何修复。
我一直在玩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：
<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 不是绝对测量值。z-index: 1000 的元素可能位于 z-index: 1 的元素后面- 只要各自的元素属于不同的堆叠上下文.
当您指定 z-index 时，您是相对于同一堆叠上下文中的其他元素来指定它的，尽管CSS 规范中关于 Z-index 的段落 http://www.w3.org/TR/CSS21/visuren.html#z-index表示仅为定位内容创建新的堆叠上下文z-index 不是 auto（意味着你的整个文档应该是一个单一的堆叠上下文），你did构造一个定位跨度：不幸的是，IE7 将没有 z-index 的定位内容解释为新的堆叠上下文。
简而言之，尝试添加以下 CSS：
#envelope-1 {position:relative; z-index:1;}
或重新设计文档，使您的跨度不再具有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/ http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/有关此错误的类似示例。为父元素（示例中的 envelope-1）提供较高 z-index 的原因是，envelope-1 的所有子元素（包括菜单）将与所有 embree-1 的同级元素（具体来说，envelope-2）重叠。
虽然 z-index 可以让你明确定义事物如何重叠，即使没有 z-index，分层顺序也已明确定义 http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex#Stacking_levels_inside_of_stacking_contexts。最后，IE6 还有一个额外的错误，会导致选择框和 iframe 漂浮在其他所有内容之上。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
