z-index在響應菜單中不起作用

Question

我有兩個用於移動和桌面網站的單獨菜單。我在此嵌套菜單中添加了非常高的z-index，但是它仍然隱藏在其他元素后面，並且不顯示在頂部。 那么我們如何在所有其他元素之上做到這一點。 這是布局示例：

<nav id="responsive_main_menu">
<div id="navigate-to">Navigate to</div>
                        <ul id="menu-main-menu-1" class="menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home alpha"><a href="#"><span>Home</span></a></li>
</ul>                       

這是CSS：

#responsive_main_menu .menu,#responsive_main_menu .menu ul {

z-index: 999999;
}

這是顯示此問題的網址。 將頁面調整為較小的版本以查看藍色菜單。 http://daccordinc.com/

Answer 1

您需要應用除默認值static以外的position屬性，以更改元素的堆疊上下文。 在下面的選擇器中添加相對位置：

#responsive_main_menu {
    position: relative;
    z-index: 999999;
}

http://img836.imageshack.us/img836/1389/wgyj.jpg

Answer 2

如果您未聲明任何position則z-index無效

我添加了position: relative; 在那里，看看現在的區別

Answer 3

z-index需要與static position （默認設置）不同的position才能工作。
試試relative ，它將起作用：

#responsive_main_menu .menu, #responsive_main_menu .menu ul {
  z-index: 999999;
  position: relative;
}