IE7 Z索引分层问题
我隔离了一个IE7的z-index错误的小测试用例，但不知道如何修复它。我整天都在玩z-index。
IE7中的z-index有什么问题？
测试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>回答 11
Stack Overflow用户
发布于 2009-08-17 12:28:52
Z-index不是绝对度量。具有z索引: 1000的元素可以在具有z索引: 1的元素之后-只要相应的元素属于不同的堆叠上下文。
当您指定z-index时，您是相对于同一堆叠上下文中的其他元素指定它的，尽管CSS spec's paragraph on Z-index说新的堆叠上下文只为具有非auto的z-index的定位内容创建(这意味着您的整个文档应该是单个堆叠上下文)，但是您确实构造了一个定位的跨度:不幸的是，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>有关此错误的类似示例，请参阅http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/。为父元素(在您的示例中为信封-1)提供更高的z索引的原因是，这样，信封-1(包括菜单)的所有子元素将与信封-1(具体地说，就是信封-2)的所有兄弟元素重叠。
尽管z-index允许您显式地定义事物如何重叠，但even without z-index the layering order is well defined。最后，IE6还有一个额外的bug，它会导致选择框和iframe浮动在其他所有元素之上。
Stack Overflow用户
发布于 2011-09-09 02:11:14
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;
});
});Stack Overflow用户
发布于 2011-11-03 21:27:14
IE定位元素中的
会生成一个新的堆叠上下文，从z索引值0开始。因此，z-index不能正常工作。
尝试给父元素一个更高的z索引值(甚至可以比子元素本身的z索引值更高)来修复这个bug。
https://stackoverflow.com/questions/1287439
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号