1

我在 Firefox 和其他浏览器上的嵌套 z-index 有问题，我有div一个 z-index 为 30000 的 z-index 位于 a 下方label，zindex 为 9000。我认为这是由 div 与 30000 z -index 位于div具有 2000 s-index 的 a 内，但我删除了它，它没有任何效果。

这里有什么明显的东西会导致这个问题吗？

<div class="field row olabel end_date">    
    <label for="cc_end_year" generated="true" class="error">* required</label>    
</div>

在我的标记中，我有一个弹出消息，在滚动一段文本时显示/隐藏。

<div class="field row olabel">
   <div style="display:none;" class="whats_this_popup"></div>
</div>

我的 CSS：

#order_form .row.end_date {
   position: relative;
   z-index: 9000;
}    
label.error {
   z-index: 9001;
}
.whats_this_popup {
   left: 360px;
   padding: 20px;
   position: absolute;
   width: 205px;
   z-index: 30000;
}
#order_form .row {
   width: 435px;
   z-index: 2000;
}
4

1 回答 1

1

这是由堆叠上下文引起的。前者 div 的 stacking context 有 z-index 9000，而后者的 stacking context 有 z-index 2000。

您仅在其父级内为标签提供 9001 的 z-index 。z-index 在父级的堆叠上下文之外是没有意义的。同样，通过为 指定 30000 的 z-index .whats_this_popup，您是说它将显示在其z-index 小于 30000的任何兄弟姐妹的前面，而不是页面上 z-index < 30000 的任何内容。

为包含div的后者提供30000 的索引将导致您想要的结果。

于 2012-11-23T11:03:05.023 回答