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;
}