Question

我正在尝试在页面中的某些元素上使用z-index。基本上，我有一个与服务员和响应箱的联系表格。联系表单在页面上的不同位置使用，工作正常......

按下发送按钮，覆盖-1覆盖表单，ajax响应触发覆盖覆盖-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;
}

FIXED：

我将叠加层注入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）在元素定位时（绝对，相对）启动新的堆叠上下文。所以我会检查你的弹出窗口的元素到root，并尝试给它们一个高z索引，看看是否修复它。通过一些试验和错误，你可能会发现问题。

Answer 2

应该在后台的代码是否使用z-index？您是否尝试将z-index更改为可笑的大值以查看它是否与其他组件竞争？

很难盲目地想到其他许多事情。

CSS中奇怪的z-index行为

2 个答案: