Z-index 在子导航中不起作用答案

【问题标题】：Z-index doesn't work in Sub NavigationZ-index 在子导航中不起作用
【发布时间】：2013-04-23 21:18:17
【问题描述】：

我有一个问题，我的 z-index 无法启动，我真的不明白为什么。我无法重新定位 DOM 中的元素，我需要一个纯粹基于 CSS 的解决方案，而不需要任何更大的黑客攻击

我有以下导航：

<nav>
    <div class="wrapper">
        <ul>
            <li>Test</li>
            <li>Test
                <ul>
                    <li>Sub test</li>
                    <li>Sub test</li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

http://jsfiddle.net/S3XBD/1/

我用 CSS 把它打包来展示我的问题

我的目标是获得 蓝色框（子导航）绿色框下（顶级导航），其方式与小提琴中演示的方式完全相同

有什么办法可以修复我的 z-indexes 或者有人可以指出我的错误吗？

感谢您的帮助

【问题讨论】：

您的蓝框位于我们的绿框下方，与您描述的完全一样。也许是浏览器的差异？
这是你要找的东西吗：jsfiddle.net/S3XBD/3

标签： html css navigation positioning z-index

【解决方案1】：

只需从 .wrapper 元素中移除 z-index 并将第二个 ul 的 z-index 更改为 -1

nav .wrapper {
    width: 100%;
    max-width: 400px;
    background: green;
    margin: 0px auto;
    position: relative;
}

...

nav ul ul {
    display: none;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    background: blue;
    z-index: -1;
}

http://jsfiddle.net/S3XBD/2/

【讨论】：

【解决方案2】：

我已经更新了你的 CSS 并移除了悬停，因为这很容易解决：但我相信你遇到的问题只是你的定位

  nav {
    width: 100%;
    background: red;
}

nav .wrapper {
    width: 100%;
    max-width: 400px;
    background: green;
    margin: 0px auto;
    position: relative;
    z-index: 50 ;
}

nav ul {
    list-style: none;
}

nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: blue;
    z-index: 100 !important;
}

nav ul li {
    display: inline-block;
}

nav ul li ul {
    display: block;

}

还有一件事：用户 firebug 找出它当前的样式，您可以在运行时在那里修改它。它还支持悬停

【讨论】：