Revision as of 12:57, 29 December 2008

3D Layering

CSS 2.1+ has a z-index property which allows you to specify the layer a given element should appear on. By default, everything is rendered on z-index of 0. However, if there is more than one item on the same z-index, in the same location, they are layered as they're rendered.

Negative values move the item further away from the observer. Positive numbers move an element closer to the observer.

Default Layering

The following show 3 divs, placed in order, all along the default z-index. You'll see how they are layered on top as they're rendered.

Specific Layering

The divs below are exactly the same as above, except we're specifying which z-index we want them to appear. For the sake of this example, we're going to code them in the same order, but have them display layered in the reverse direction: