jQuery z-index doesn't work

Question

Hi,

i have a menu and on hover i fade a box in. Behind this box i have a small icon and i want to move it in front of the box so you can see it on hover.

Here is my menu > Navigation

I tried it with that jQuery(this).find(".flyer").css("z-index", 10000); but it stays behind. How could i manage that problem?

greets Max

Answer 1

z-index only works on positioned elements, so you need to give .flyer a position, like this:

.flyer{
    margin: -75px 0 0 0;
    width:53px;
    height:74px;
    position: relative;
}

Here's your example/fiddle edited to work, we're just calling this on hover:

$(this).find(".flyer").css("z-index", 10000);    

and this on hover out:

$(this).find(".flyer").css("z-index", "auto");

Answer 2

Make sure that you reference the proper element with the .flyer selector and z-index does not do the trick, try with the zoom attribute.