html - 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以更改元素的堆叠上下文。将相对定位添加到以下选择器：

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

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

Answer 2

z-index如果您没有任何position声明，将无法使用

我在position: relative;那里添加，现在看到不同之处

Answer 3

z-index需要position不同于static（这是默认值）才能工作。
尝试relative，它会工作：

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