jquery下拉菜單出現在其他div後面

Question

我看過類似的問題，但沒有運氣修復它。這是我的問題：

這裏是jQuery代碼：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document) .ready(function(){ 
$('li') .hover(function(){ 
$(this) .find('ul>li') .stop().fadeToggle(400); 
}); 
}); 
</script> 

下面是下拉和箱它的CSS部分是躲在背後：

ul li li 
{ 
background:#50d7db; 
color:#005263; 
display:none; 
z-index: 5000; 
} 



#maincontent 
{ 
background:rgba(255,255,255,0.5); 
opacity:100%; 
float:left; 
width:815px; 
height:390px; 
margin-left:15px; 
z-index:-5000; 
} 

我已嘗試： - 更改/重做z索引值。 - 刪除maincontent div的不透明度。

Answer 1

z-index只適用於定位元素。將position:relative添加到您需要控制的z-index之中。