javascript - CSS 中奇怪的 z-index 行为

Question

我正在尝试对页面中的某些元素使用 z-index。基本上，我有一个带有服务员的联系表和一个回复框。联系表格在页面上的不同位置使用并且工作正常......

按下发送按钮，overlay-1 覆盖表单，ajax 响应触发覆盖 overlay-1 的感谢框

现在这一切都适用于页面上相对定位的表单。但是，我有完全相同的表单弹出在所有内容之上，但我的 z-indexes 没有得到尊重，即使表单使用相同的类。

谁能给我指点？

亚历克斯

HTML:

<div id="popuporderform" class="orderform">
    <!-- .resultBox injected here -->
    <form method="post">
        <input name="name" type="text" />
        <input class="send" type="submit" value="Send" />
    </form>

</div>
<!-- .orderspinner injected here -->

CSS:

/* -- ORDER FORM -- */
div.orderform {
    width: 220px;
    background-color: #fff;
    height: 300px;
}

// This ID is for the pop up version of the form and is not used in the
// form that is within the layout of the page
#popuporderform {        
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 200;
}

// this is the overlay with spinner in it -- this DOES overlay the form
.orderspinner {
  position: absolute;
  opacity: 0.9;
  filter: alpha(opacity=90);
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
  z-index: 250;
  background: #fff;
}

// This is the thank-you box - it should appear over the .orderspinner (but isn't)
.resultBox {
    display: block;
    width: 150px;
    height: 100px;
    background-color: #fff;
    position: absolute;
    z-index: 300;
    border: 1px red solid;   
    color: #000;
}

已修复:

我将叠加层注入(inject)到 div 中而不是在其外部，因此将其放入相同的 z-index 上下文中。

HTML:

<div id="popuporderform" class="orderform">
    <!-- .orderspinner injected here -->
    <!-- .resultBox injected here -->
    <form method="post">
        <input name="name" type="text" />
        <input class="send" type="submit" value="Send" />
    </form>

</div>

Answer 1

前段时间我遇到了这个问题。我的问题原来与堆叠上下文有关，基本上当您有一个带有 z-index 的元素时，它会在其中启动一个新的堆叠上下文，这意味着不会将其中元素的 z-index 与元素的 z-index 进行比较外部。 增加事情复杂性的是 IE 6-7(我不知道 8)在元素定位(绝对、相对)时启动一个新的堆叠上下文。 所以我会检查你的弹出窗口的元素，一直到根，并尝试给它们一个高 z 索引，看看是否能修复它。通过反复试验，您可能会发现问题所在。