December 16th, 2008 by Wes Baker

Fun with Z-Indexes

Over in Production we are seeing more and more designs with a very layered look. In the past, these have been taken care of with a rough mix of combined images, fixed height and width blocks and lots of luck. But as we move these looks to clients with more dynamic sites, we now have to worry about content growing in one direction or another.

The Setup

For example, here is a comp that came to me:

A few points worth noting about the design:

The menu on the left hand side of the page needs to grow.
There's another version of the header (which contains Sub Section Title) Which is about twice as tall.
The header (in either version) can grow vertically.

With these points in mind z-indexes are the best way to go.

The Problem

The problem area is the top left corner of the content area. I colored in the three different blocks that we are concerned with. In order of height — from top to bottom — you have the header (in green), the menu (in red), and the content (in blue).

Here is the necessary XHTML markup (assuming we've done the rest of the page as necessary and we're in the body tag):

<div id="content-section">
    <!-- menu content here -->
</div>
<div id="content-inner">
    <div id="content-header">
        <h2>Sub Section Title</h2>
    </div>
    <div id="content-main">
        <!-- main content here -->
    </div>
</div>

The Solution

Next up is the CSS and this is the where we start to get our hands dirty. There are two very important things to understand when you are thinking about using z-indexs:

You must have either position: relative or position: absolute for z-index to even work.
If you apply a z-index to a containing block and then apply another z-index to an element inside that containing block, you are not overwriting the first z-index and you are not adding to it. You are now working on a separate plane. So If I applied a z-index of 10 to content-section and then a z-index of 8 to content-inner, content-inner is sitting below content-section. If I wanted content-header to be above content-section and applied a z-index of 1000, nothing would happen because its in relation to the contents of content-inner which sit below content-section.

The second point is very complicated but incredibly important, so you should reread it.

So how did I get content-header to sit above content-section? I never applied a z-index to content-inner (the following code is illustrative and other CSS properties have been removed):

#content-section {
 position: absolute:
 z-index: 100;
}
 
#content-header {
 position: relative;
 z-index: 200;
}

This works in the browsers that we normally test — Firefox, Safari, IE7 and IE6. In case you're curious, I used large numbers for the z-indexes in case I need to add something in between later.