一個div標簽具有z-index：2如何更改子div標簽z-index：3

Question

我有一個問題，那就是我在網站上使用multilevelpushmenu ，

我給.protect類指定了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和.protect .r-icon不是同級，所以它似乎不起作用。

您可以在本文中找到有關此內容的更多詳細信息，尤其是在本文的Stacking Contexts部分中。

另外，這是指向z-index中的Stacking Context的MDN頁面的鏈接，以進行更詳細的說明。

Answer 2

實際上，在多鍵式插件中，有一種錯覺，使您看起來好像父菜單位於子菜單的后面。 但是從HTML的角度來看，它使用jQuery 隱藏（顯示：無；） 。 因此，如果您想首先查看圖標或圖像。 您必須將其放置在適當的位置，以使其始終保持在該位置。

將在div外面一個div id為“MP-菜單”

嘗試這樣的事情：

<div class="protect">
  <div style="position:absolute;z-index:999;top:20px;left:20px;">Your Image here</div>
  <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>