html - 使用 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

试试这个 fiddle :http://jsfiddle.net/PNC7g/ : 我在 IE7+ 和 Firefox 9 上试过。

思路是设置position: relative; z-index: 1 到 #content 和每个 link 并且内容定义了属性 top: -13px。即使它们共享相同的 z-index 顺序位置，#content 也是在链接列表之后定义的(在标记内)，因此它会与导航菜单重叠。

但是如果您稍后将 z-index: 2 设置为链接(具有特殊类，如 .current)，则所选元素将能够与分区