CODEWITHSUNDEEP
htmlcssz-index
Rahat Ahmed
Rahat Ahmed

Reputation: 2180

Using z-index to put some objects behind, others in front

I've got a horizontal navigation bar on my page which is pushed down a few pixels to overlap with the content of the div below. I want to have some of the links placed behind the background of the content div, but I can't figure out a way to keep some of the links (such as the link to the current page) in front. Here is what I have:

<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>

Relevant 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;
}

I'm using the class of each link to determine if it points to the current page, so I'd like that link to stick out. The problem is that the stacking context for each of these is inside the div or ul.

Upvotes: 2

Views: 4253

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Try this fiddle: http://jsfiddle.net/PNC7g/ : I tried it on IE7+ and Firefox 9.

The idea is to set position: relative; z-index: 1 to the #content and to every link and the content has the property top: -13px defined. Even if they share the same z-index order position, #content is defined after the list of links (inside the markup), so it will overlap the navigation menu.

But if you later set z-index: 2 to a link (with a special class, like .current), the selected item will be able to overlap the div.

Upvotes: 5

Related Questions