Question

我在Firefox上有嵌套z索引的问题，也可能是其他浏览器，我的div的z-index为30000，位于label以下，zindex为9000我认为这是由于300的z-index位于具有2000 s索引的div内的div引起的，但我删除了它并且没有效果。

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

<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

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

您的标签仅在其父内为z-index 9001 。 z-index在父级的堆叠上下文之外是没有意义的。同样，通过为.whats_this_popup指定一个30000的z-index，你会说它将显示在z-index小于30000的任何兄弟之前，而不是任何东西在具有z-index＆lt;的页面上30000

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

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

1 个答案: