Firefox上的嵌套z-index问题，z-index较高，z-index较低

Question

我在Firefox以及其他浏览器上存在嵌套的z-index的问题，我的z-index为30000的div位于zindex为9000的label下面。我认为这是由div导致的30000个z索引位于一个div ，具有2000 s索引，但是我删除了它，但没有任何效果。

有什么明显的地方会引起这个问题吗？

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

Answer 1

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

您仅在其父级中为标签赋予9001的z索引。 在父级的堆叠上下文之外，z索引是无意义的。 类似地，通过为.whats_this_popup指定一个30000的z-index，就是说它会显示在z-index小于30000的任何同级兄弟的前面，而不是z-index <30000的页面上的任何东西。 。

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