隐藏在页面内容后面的下拉菜单？答案

【问题标题】：Dropdown menu hidden behind content on page?隐藏在页面内容后面的下拉菜单？
【发布时间】：2014-11-20 04:37:38
【问题描述】：

我正在尝试制作一个导航栏作为练习，但我卡住了。我有一个高度为 x 的导航栏和一个可变高度的内联块导航菜单，其中包含一个高度为 x 的导航按钮块和一个可变高度的导航下拉块。导航菜单上的溢出是隐藏的（即导航下拉菜单），直到将鼠标悬停在它上面。

问题是出现nav-dropdown时，它位于页面内容的后面。

我试图将 z-index 添加到每个元素，包括最顶层的父元素，但无济于事。

请看 js-fiddle:http://jsfiddle.net/wek84cx7/

导航栏配置如下（可能会有多个导航菜单）：

<div class="navbar" style="z-index: 999;">

    <div class="nav-menu" style="z-index: 999;">
        <div class="nav-button" style="z-index: 999;">
            <div class="vertical-align-helper"></div>
            <span style="vertical-align: center;">Hello World</span>
        </div>
        <div class="nav-dropdown" style="z-index: 999;">
            <ul style="z-index: 999;">
                <li style="z-index: 999;">onee</li>
                <li style="z-index: 999;">twot</li>
                <li style="z-index: 999;">threeo</li>
            </ul>
        </div>
    </div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

将position: relative 添加到.nav-bar 元素。这将为它设置 z-index 堆栈顺序...通常设置除static（默认值）以外的任何位置值都会建立新的堆栈顺序，否则，z-index 将被忽略。

【讨论】：

【解决方案2】：

我建议将导航下拉菜单的 z-index 设置为高于正文的值。在这种情况下，您为所有内容设置了较高的 z-index，这不是很有效率。

我会在导航上设置一个 20 左右的 z-index，在 body 上设置一个 1 的 z-index，如下所示：

.nav-dropdown {
    z-index: 20;
}
body {
    z-index: 10;
}

希望这会有所帮助。

【讨论】：