Question

我的页面上有一个水平导航栏，它被向下推几个像素，与下面div的内容重叠。我希望在内容div的背景后面放置一些链接，但我无法找到一种方法来保留一些链接（例如当前页面的链接）。这就是我所拥有的：

<div id="header">
    <ul id="nav">
    <li><a href="index.php" class="index">index</a></li>
    <li><a href="project.php" class="project">project[]</a></li>
    <li><a href="contact.php" class="contact">contact</a></li>
    <li><a href="about.php" class="about">about</a></li>
    </ul>
</div>
<div id="content">
</div>

相关CSS：

div#content {
        background:#444;
        border-radius:15px;
        padding:40px 30px 30px 30px;
        clear:left
    }
div#header {
        position: relative;
        margin-left:20px;
        top: 13px;
    }


ul#nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;

}

ul#nav li {
    display:inline;
}

ul#nav a {
    text-decoration:none;
    color: #444;
    font-size: 30px;
}

我使用每个链接的类来确定它是否指向当前页面，因此我希望该链接能够突出显示。问题是这些中的每一个的堆叠上下文都在div或ul中。

Answer 1

试试这个小提琴：http://jsfiddle.net/PNC7g/：我在IE7 +和Firefox 9上尝试过它。

我们的想法是将position: relative; z-index: 1设置为#content和每个link，并且内容已定义属性top: -13px。即使它们共享相同的z-index订单位置，也会在链接列表（标记内）之后定义#content，因此它将与导航菜单重叠。

但如果您稍后将z-index: 2设置为链接（使用特殊类，例如.current），则所选项目将能够与div重叠。

使用z-index将一些对象放在后面，其他对象放在前面

1 个答案: