IE7 Z索引分层问题

一尘不染

IE7 Z索引分层问题

css

我已经隔离了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>

阅读 327

2020-05-16

共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浮动在其他所有内容之上。

2020-05-16