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