Question

我有一个问题，我的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用来演示我的问题

我的目标是以绿色方框（顶级导航）获取蓝框（子导航），其方式与小提琴< / p>

有没有办法修复我的z索引或有人指出我的错误？

感谢您的帮助

Answer 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/

Answer 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;

}

还有一件事：用户萤火虫找出它当前的样式，你可以在运行时修改它。它还支持悬停

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

2 个答案: