Question

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

问题是当导航下拉列表出现时，它位于页面上的内容之后。

我试图将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>

Answer 1

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

Answer 2

我建议将导航下拉菜单的z-index设置为高于正文的值。在这种情况下，你要在所有东西上设置一个高z-index，这不是很有效率。

我在导航上设置了一个20左右的z索引，在身体上设置了一个z索引为1，如下所示：

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

希望这有帮助。

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

2 个答案: