Question

我正试图围绕一个我现在正盯着看一个小时的问题。我正在处理this page，我的问题出在菜单上。

我有一个导航列表，其中有一个特殊的绝对定位列表项（＃magic-line），用于在悬停其他项目时使用jQuery形成背景，以给它带来很好的效果。问题是它一直停留在导航列表项之前，导致错误的行为。

我一直在给导航列表项和锚点中的z-index 200，同时给绝对定位列表项目的z-index为100.这应该可以直接解决问题知道。但显然它没有。我可能会忽略一个生硬的细节。希望你们能为此提供新的启示。

HTML看起来像这样：

<nav>
    <ul class="group">
        <li class="current"><a href="/v3/" data-section="#start">Home</a></li>
        <li><a href="/v3/over-mij/" data-section="#over-mij">Over Mij</a></li>
        <li><a href="/v3/portfolio/" data-section="#portfolio">Portfolio</a></li>
        <li><a href="/v3/inspiraties/" data-section="#inspiraties">Inspiraties</a></li>
        <li><a href="/v3/contact/" data-section="#contact">Contact</a></li>
        <li id="magic-line" style="width: 63px; height: 48px; left: 0px; overflow: hidden;"></li>
    </ul>
</nav>

影响此HTML的CSS部分是：

nav{
    color: #edebe6;
    font-size: 1.2em;
}
nav ul{
    padding: 0;
    list-style: none;
    display: block;
    position: relative;
}
nav ul li{
    float: left;
    z-index: 200;
}
nav ul li a{
    color: #edebe6;
    text-decoration: none;
    display: block;
    float: left;
    padding: 10px;
    border: none;
    z-index: 200;
}
nav ul li a:hover{
    background-color: transparent;
}
nav #magic-line{
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    background-color: #d3643b;
    z-index: 100;
}

Answer 1

经过测试，如果您在菜单项上设置了position: relative，它就会按预期运行。

nav ul li a {
    border: medium none;
    color: #EDEBE6;
    display: block;
    float: left;
    padding: 10px;
    position: relative;
    text-decoration: none;
    z-index: 200;
}

这些项目没有考虑z顺序。

HTML / CSS元素不能强制为后台

1 个答案: