CSS中奇怪的z索引行为

我试图对页面中的某些元素使用z-index。基本上,我有一个服务生的联系表和一个回复箱。联系人表单在页面的另一个位置使用,工作正常。。。

按下Send按钮,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中,而不是在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>