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無法正常工作

回答

相關問題