使用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和每个link 内容都top: -13px定义了属性.即使它们共享相同的z-index订单位置,#content也会在链接列表(标记内)之后定义,因此它将与导航菜单重叠.

但是如果你以后设置z-index: 2了一个链接(有一个特殊的类,比如.current),所选的项目将能够与div重叠.