jquery - How to make sure an element is on top of all other elements in a page?

Question

I have 2 elements: a Dropdown Menu and an Images Slideshow.

The animations are done using jquery.

The problem I have (Only in IE7) is that the Dropdown Menu is cropped by the Images Slideshow.

I need the Dropdown Menu to be on top of the Images Slideshow.

In css I set the Dropdown Menu main div to: z-index: 9999 and the Images Slideshow main div to : z-index: 1

I similar problem this would be fix but not in this case. What can I do?

Answer 1

z-index work with position

use also position like

 z-index:9999,
position:absolute

Answer 2

position : absolute; for the dropdown will do the trick

Answer 3

z index only works when you also give the position option (absolute, relative, fixed)

Older IE's also require the parents to get an z-index to correct it. In the example below you want the div that has no id, this is the highest possible in the example. If that is not an option, go for the next best thing (div#2 in the example)

<div>
    <div id="1" />
    <div id="2">
        <nav>Your menu</nav>
    </div>
    <div id="3" />
</div>

Answer 4

Be sure you thoroughly understand stacking contexts for z-index:

• CSS 2.1 w3c, Appendix E. Elaborate description of Stacking Contexts
• Which CSS properties create a stacking context? (accepted answer)
• Detailed Look at Stacking in CSS

Answer 5

created jsfiddle here

If you don't have z-index for slideshow, things should work normally. Let me know if you have z-index for slideshow.

#dropdown {
    background-color:red;
    position:relative;
}

#dropdown .body {
    display:none;
    position:absolute;
    background-color:green;
    top:10px;
    left:0;
}

#dropdown.hover .body {
    display:block;
}


#slideshow {
    background-color:blue;
    height:300px;
}