javascript - 一个 div 标签有 z-index :2 how to change sub div tag z-index:3

Question

我有一个问题，那就是我在我的站点中使用了 multilevelpushmenu，

我把 z-index:2 给了 .protect 类， 我想为 .r-icon 类提供 z-index:4，

它似乎不起作用。

<div class="protect">
    <div id="mp-menu">
        <nav>
             <h2 class="r-icon"><i class="fa fa-reorder"><img src="/images/home/menu-selection.png" width="22" height="17" id="sas"></i></h2>

        </nav>
    </div>
</div>

任何人都可以帮助找出这个错误， 我只想在所有 div 的顶部显示 .r-icon。

Answer 1

z-index 仅适用于两个元素在 DOM 树中处于同一级别(即它们具有相同的父元素)的情况。在您的情况下，它似乎不起作用，因为类 .protect 和 .r-icon 不是 sibling 。

您可以在 this article 中找到有关此的更多详细信息，尤其是文章中的Stacking Contexts部分。

另外，这里有一个链接 MDN's page on Stacking Context in z-index以获得更详细的解释。