Now, unless you are really good at making a table mess up, you've probably noticed that you can't layer objects on top of one another with tables. You can't have text on top of images, or multiple images on top of one another. The logical solution for the intrepid designer is, of course, to make everything one gigantic bitmap - text, graphics, everything. But this is a design "trick" that should be unlearned for dHTML.

As with most everything in dHTML, there is an order created that is based on the position in which an object appears in a document. For example:

[On this page you are seeing GIFs instead of actual dynamic HTML because you're using a pre-4.0 browser or Netscape 4; Netscape 4 would display this dHMTL if it weren't inside tables.]

In the example in which Aaron is behind his desk, Aaron's image appears first in the source code:

<div id="aaron">

   <img src="/images/aaron.gif">

</div>

<div id="desk">

   <img src="/images/extraDesk.gif">

</div>

But if we want Aaron to be in front of the desk, we would write the HTML like this:

<div id="desk">

   <img src="/images/extraDesk.gif">

</div>

<div id="aaron">

   <img src="/images/aaron.gif">

</div>

This type of layering is done implicitly in HTML. So one way to structure your dHTML pages is to put the objects in the order in which they need to appear in their layering. Objects that are lower on the visibility range are placed first and objects that are higher come later. However, that doesn't always work out too well. Many times you need to have the objects in your source code in an order that has nothing to do with how it will look. That's where the z-index CSS attribute comes into play.

Here's the same example with Aaron and his desk again. This time we'll leave the HTML markup the same but give the objects an explicit z-index.

The HTML for both is identical, but the CSS is different.

<style type="text/css">

#aaron {position:absolute;

        left: 8px;

        top: 31px;

        width: 79px;

        height: 73px;

        z-index: 2

       }

</style>

The z-index can be a positive or negative value (elements with negative values fall below the parent), and the only visible effect is when one z-index is greater than another, so the visual difference between a z-index of 1 and 2 is identical to a difference of 1 and 1000.