将元素的 z-index 放置在父元素的同级元素上方

Question

我有一个包含两个元素的菜单：

<nav id="menu">
            <div id="menu-list">
                <a href="{{ path('recipes') }}" class="menu-list-item menu-list-item-selected" id="menu-list-item-recipes">{{ 'recipes.tab.label'|trans }}</a>
                <a href="{{ path('ingredients') }}" class="menu-list-item" id="menu-list-item-ingredients">{{ 'ingredients.tab.label'|trans }}</a>
            </div>
        </nav>

两个 元素都是相对定位的，它们的父元素（#menu 和 #menu-list 是未定位）

加载页面时，页面上有一个 50% 不透明的黑色层，它是 #menu 的同级元素：

<div id="blackLayer" onclick="hideBlackLayer()">
    </div>

#blackLayer 定位固定并具有 z 索引在2.

我希望在页面加载时有一个（且仅有一个）.menu-list-item 元素（比如#menu-lits-item-recipes) 位于暗层上方。

如果我将 #menu-lits-item-recipes z-index 设置为 3，则不会发生任何情况。如果我将#menu的z-index设置为3（使用position：relative），所有内容都在黑暗层之上。

有没有一种方法可以在黑暗层上只制作一个 而不修改 DOM 树，因为我无法更改 HTML ？

Answer 1

您可以尝试我在这里创建的解决方案。

https://jsfiddle.net/mc1ekzu4/37/

请注意，我正在尝试模拟您的情况，但关键是你应该为突出显示的元素设置 position:relative; 。

#blackLayer {
  position: fixed;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}

#menu-list-item-recipes {
  z-index: 3;
  position: relative;
  background-color: #FFF;
}