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

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 和每个链接，并且内容定义了属性top: -13px。即使它们共享相同的 z-index 顺序位置，#content 也是在链接列表之后定义的（标记内），因此它将与导航菜单重叠。

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