IE7 Z索引分层问题
发布于 2021-02-02 16:52:04
我已经隔离了IE7 z-index错误的一个小测试用例，但是不知道如何解决它。我z-index整天都在玩。
z-indexIE7有什么问题？
测试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>
关注者
0
被浏览
95
1 个回答
-
Z索引不是绝对测量。 只要z-index：1000的元素位于 不同的 堆叠上下文中 ，则z-index：1000的元素可能位于z-
index：1 的元素之后。当您指定z-index时，您是相对于同一堆叠上下文中的其他元素指定它的，尽管CSS规范在Z-index上的段落指出，仅为 具有z-index而不是z-index的 定位内容创建新的堆叠上下文_自动_（意味着您的整个文档应该是单个堆叠上下文），您 _确实_构造了定位范围：不幸的是，IE7将没有z索引的定位内容解释为新的堆叠上下文。
简而言之，请尝试添加以下CSS：
#envelope-1 {position:relative; z-index:1;}或重新设计文档，以使您的跨度不再具有相对位置：
<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>。使父元素（在您的示例中为envelope-1）具有更高的z-index的原因是，因为那时信封1的所有子元素（包括菜单）都将与信封1的所有兄弟姐妹（特别是信封2）重叠。
尽管使用z-index可以显式定义事物的重叠方式，即使没有z-index，[也可以很好地定义分层顺序。最后，IE6还有一个额外的错误，该错误导致选择框和iframe浮动在其他所有内容之上。
