将元素的 z 索引放在父元素的同级元素上方

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>

两个<a>元素都被定位为相对的，并且它们的父母(#menu和#menu-list没有被定位(

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

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

#blackLayer的位置固定，并且z索引为2。

我希望，在页面加载时，.menu-list-item元素中的一个(并且只有一个((比如#menu-lits-item-recipes(位于暗层之上。

如果我将#menu-lits-item-recipesz索引设置为3，则不会发生任何事情。如果我将#menu的z索引设置为3(使用position: relative(，则所有内容都在暗层之上。

有没有一种方法可以在不修改DOM树的情况下在暗层上只制作一个<a>，因为我无法更改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;
}