z-index无法正常工作

我在3个容器中设置z-index时遇到问题。z-index无法正常工作

前两个是网页菜单，第三个是语言选择。我不知道为什么扩展菜单不包括语言选择。

这是代码，谢谢你的建议！

HTML：

<div id="menu"> 
     <div class="nabidka"> 
<nav id="navigation"> 
    <a class="menu_button" href="#footer_nav" onclick="toggleNav(); return false;">MENU</a> 
    <ul id="navigation_list" role="navigation"> 
<li style="padding-left: 0;"><a href="/">HOME</a></li> 
...... 
    </ul> 
</nav> 
     </div> 

     <div id="lang"> 
language select... 
     </div> 


     </div>

CSS：

#navigation ul { 
    display: none; 
    list-style: none; 
    margin-left: 0; 
    padding-left: 0; 
    margin-bottom: 0; 
    margin-top: 20px; 
    z-index: 2; 
} 
#navigation ul.expanded { 
    display: block; 
    z-index: 2; 
} 
#navigation li { 
display: block; 
width: auto; 
padding: 0; 
z-index: 2; 
} 

    #lang { 
    position: absolute; 
    top: 50px; 
    right: 5px; 
    z-index: 1; 
    }

来源

2016-03-08 H Sturma

你申请'Z-index'非定位的元素。这就是为什么它不起作用。 http://stackoverflow.com/a/35772825/3597276 –

@TylerH，我没有发布重复，因为大多数愚蠢的答案不完全正确（主要是因为他们已经过时）。实际上，每个答案都表明，对于'z-index'来说，一个元素必须被定位。尽管在大多数情况下（包括这个问题）都是如此，但在所有情况下都不再是这样。即使使用'position：static'，'z-index'也可以在** flex items **和** grid items **上工作。如果您有兴趣，请参阅我之前评论中的链接。 –

@Michael_B是对的，但问题似乎是重复的。最好的问候， –

您将需要一个position属性添加到有z-index属性的所有元素。尝试将position: relative添加到它们全部。

也请参阅本文档：z-index CSS | MDN

来源

2016-03-08 21:42:00

不错，它现在可行，谢谢！ –

z-index是否可以使用静态定位元素？我不确定它的确如此，但否则，这是OP所需要的。 – sm1215

太棒了！ 'position：static'将不起作用。因为'position：static'仅仅意味着“忽略”来自'left'，'right'，'top'和包含'z-index'的所有定位指令。它也是'div'的默认属性。 –

z-index无法正常工作

回答

相关问题