css - Jquery fadeId fadeOut below lower z-indexed div -

css - Jquery fadeId fadeOut below lower z-indexed div -

i'm laying ground work creating menu bar fades background when hovered. background whole page using png graphic semi transparent , positioned on whole page.

i have jquery doing it's job seems ignore z-index of menu div i'm trying not have "under" transparent png div layer.

to recap - page loads , there div transparent png covering working area (#overlay). #overlay div set have display:none; not show. when there hover on menu div, overlay div fadesin covering work area. menu div set z-index:20 , overlay div z-index @ 10 problem overlay div covered menu , seems not respect z-index layer value.

can please help me understand how accomplish goal without having resize overlay exclude menu area (margin-top = menu height).

http://jsfiddle.net/erepz/

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

update: code isolate menu area more inline menu hover action:

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/

(built on ruben infante's code below)

only items positioned (e.g., position: relative, position: absolute or position: fixed) can utilize z-index.

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

jsfiddle

suggestion:

if away using image span entire web page, can utilize solid background color , vary opacity during animation using .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

jquery css z-index