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

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

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

现在，对于在页面上相对放置的表单，这一切都可以正常工作。但是，我有完全相同的窗体弹出所有内容，但即使窗体使用相同的类，我的z索引也无法兑现。

谁能给我任何指示？

亚历克斯

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;
}

固定：

我将叠加层注入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>

最佳答案

不久前，我遇到了麻烦。我的问题原来与堆栈上下文有关，基本上，当您有一个带有z-index的元素时，它将在其中启动一个新的堆栈上下文，这意味着其中的元素的z-index不会与元素的z-index进行比较外面。
事情变得更加复杂的是，当元素（绝对，相对）定位时，IE 6-7（我不知道8）会启动一个新的堆栈上下文。
因此，我将检查您弹出式窗口的元素直至根，然后尝试为它们提供较高的z索引，看看是否可以解决该问题。经过反复试验，您可能会发现问题所在。

的Z

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