z-index not functioning properly on menu, due to jQuery slider

问题

It appears that for some reason my content slider sits "on top" of my navigation menu despite my adjustment of various z-index properties to correct the issue.

The wrapper on my menu is a positionable element and the slider is only setting the content to z-index's of 98 or 99 so I can't quite figure out why setting my menu to a z-index of 999 doesn't work.

I've tried adjusting the various z-indexes via Firebug to no avail.

The site in question currently resides on our test server here: http://www.testflightapparel.com

回答1:

Usually position: absolute; along with z-index works always in my projects with sliders. Do not forget to render the menu after the slider so it is forced to sit on top.

Here is what I did when I edited your HTML in Chrome:

<div class="main">
...
 your slider code
...
</div>

<!--See the added inline styles -->

<div class="wrapper_menu menu_dark_theme" style="position: absolute; margin-top: -1200px; z-index: 9999;">
   <ul class="menu menu_takeflight">...</ul>
</div>

See screen capture attached:

来源：https://stackoverflow.com/questions/11409303/z-index-not-functioning-properly-on-menu-due-to-jquery-slider