0

我有一个问题，我的 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 或者有人可以指出我的错误吗？

谢谢你的帮助

4

2 回答 2

2

只需从 .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/

于 2013-04-23T13:10:49.897 回答
0

我已经更新了你的 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 找出它当前的风格，你可以在运行时在那里修改它。它还支持悬停

于 2013-04-23T13:18:17.470 回答