Question

我有问题，就是我在我的网站中使用multilevelpushmenu

我将z-index:2提供给.protect班级，我想为z-index:4课程提供.r-icon，

它似乎没有用。

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

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

Answer 1

z-index仅在两个元素位于DOM树中的同一级别时才适用（即它们具有相同的父元素）。在您的情况下，它似乎不起作用，因为类.protect和.r-icon不是兄弟姐妹。

您可以在this article中找到有关此内容的更多详细信息，尤其是文章中的堆叠上下文部分。

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

Answer 2

实际上在多推送插件中，有一种错觉可以让你看到子菜单后面的父菜单。但是在 HTML 的观点中，使用jQuery 隐藏（display：none;）。因此，如果您希望首先看到图标或图像。你必须定位它，以便它应该一直呆在那里。

在 div 之外放置一个div id“mp-menu”

尝试这样的事情：

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

一个div标签有z-index：2如何更改sub div标签z-index：3

2 个答案: