Question

我有一个下拉菜单，虽然我已经在每个可能的元素上将z-index设置为999，但下拉列表始终显示在h1下方。

为什么会发生这种情况？

这适用于所有浏览器。

<ul>
    <li><a>Menu item</a>
        <ul>
            <li><a>Sub item 1</a></li>
            <li><a>Sub item 2</a></li>
            <li><a>Sub item 3</a></li>
            <li><a>Sub item 4</a></li>
        </ul>
    </li>
</ul>

<div id="article"><h1>Test title</h1></div>

以上是使用的html 我尝试在所有<ul>'s <li>'s and <a>'s

上设置一个999的z-index

示例css是适当的基本display:block;和float: left; ul li ul设为display: none，display: block;后设为ul li:hover

然而，当子菜单与<h1>重叠时，菜单会在其下面。

菜单位于<div id="article">背景色之上但低于<h1>的文字

Answer 1

z-index：999必须在菜单中，而不是在所有其他元素中。

Answer 2

z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。此外，除了Topera写的内容之外，还给菜单的div或ul提供了比h1更大的z-index值。如果我们有一些代码，那将是最好的。

下拉菜单总是显示在h1下方？

2 个答案: