Использование 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.