Jquery fadeId fadeOut下面z-indexed div

Question

我正在鋪設創建菜單欄的基礎工作，當徘徊時淡化背景。背景將是整個頁面，使用一個半透明的png圖形，位於整個頁面上。

我有jquery這樣做的工作，但它似乎忽略了菜單div的z-index，我試圖不在透明png div層下面。

回顧 - 頁面加載，並有一個透明png完全覆蓋工作區域（#overlay）的div。 #overlay div也被設置爲顯示：無;所以它最初不顯示。 當在菜單div上方懸停時，疊加div將淡入覆蓋工作區域。 菜單div設置爲z-index：20，覆蓋div z-index位於10 問題是覆蓋div覆蓋菜單，似乎不尊重z-index圖層值。

有人可以幫助我瞭解如何實現此目標，而不必調整覆蓋來排除菜單區域（margin-top =菜單高度）。

http://jsfiddle.net/ERepZ/

$("#box").hover(function() { 
    $(this).children("#overlay").fadeIn(); 
    }, function() { 
$(this).children("#overlay").stop().fadeOut(); 
}); 

UPDATE： 此代碼將隔離菜單面積更內嵌有菜單懸停動作：

var animationSpeed = 400; 
var fadeMax = 0.5; 
var fadeMin = 0; 
$("#menu").hover(function() { 
$("#overlay").stop().fadeTo(animationSpeed, fadeMax); 
    }, function() { 
$("#overlay").stop().fadeTo(animationSpeed, fadeMin); 
}); 

http://jsfiddle.net/sMmSb/1/

（建立在魯本方特的代碼以下）

Answer 1

僅定位的項目（例如，position: relative,position: absolute或position: fixed）可以使用z-index。

#menu { 
    position: absolute; 
    height:50px; 
    width: 450px; 
    background-color:#999; 
    z-index:20; 
} 

jsfiddle

建議：

如果您想使用的圖像跨越整個網頁跑不掉，你也可以簡單地使用了堅實的背景顏色和改變使用.fadeTo()在動畫期間不透明。

CSS

#overlay { 
    position: absolute; 
    display: none; 
    top: 0; 
    left: 0; 
    width: inherit; 
    height: inherit; 
    background: #000; 
    z-index: 10; 
} 

JS

var animationSpeed = 400; 
var fadeMax = 0.5; 
var fadeMin = 0; 
$("#box").hover(function() { 
    $(this).children("#overlay").stop().fadeTo(animationSpeed, fadeMax); 
}, function() { 
    $(this).children("#overlay").stop().fadeTo(animationSpeed, fadeMin); 
}); 

jsfiddle