Z-Index Order:
        What's on Top using <DIV>

The z-index controls the stacking order of those elements that have the property.

You can create "layers" for stacking using the DIV tag under IE4+ and NC4+. In fact, NS6 seems to like DIV just fine! The LAYER tag works under NC4 only. The DIV tag does behave somewhat differently in the two browsers. Images of the effects are at the bottom of the page. Check out the examples using <LAYER>.


Examples

The only image used in the examples is the picture of the lake!
First Layer
at start
Second Layer
Third Layer
Fourth Layer

 
 

The four layers above are created using DIV tags. They have their LEFT property set at 0, 100, 200, & 300,respectively, while having the same TOP value. Other properties are set using CLASS. You will find the word "layer" used in its ordinary sense here. This can be confused with the tag LAYER used only in NC4, but it's awfully hard to talk about overlapping ?????? without using the ordinary word for it, which is "layer."

Oddity in NC4: If the division creating the fourth layer above, for example, uses STYLE in the DIV tag itself to set the same properties, it will display just fine, but in NC4 the divisions further down the page will no longer accept their settings! (This drove me NUTS until I finally eliminated enough of the right code to see what was happening!)

Under IE4+ these divisions are colored rectangles. Under NC4 the color exists only where the text exists.


First Layer
at start
Second Layer
Third
Layer
Fourth layer

 

 

The stack of layers above have LEFT set to 0, 10, 20, & 30 and have the same TOP value. The z-indexes are 1, 2, 3, & 4. You can see how they are overlapping each other and hiding the parts underneath.


First Layer
at start
Second Layer
Third
Layer
Fourth layer

 

 

Changing the z-index, changes which layer is on top. In this case the original bottom layer has its z-index changed to 4, while the other layers have their index decreased by 1.


With a proper choice of layer sizes, positioning, and use of BGCOLOR or BACKGROUND, you can create many interesting effects.

The simplest effect would be to write text on top of a graphic:

Lake Louise
Lake Louise
View the source to see the syntax used. We cannot directly position an image. We must set it in a division that is the same size as the image and position the division instead.

There is a slight difference between NC4 and IE4 in where the text appear on the image and rendering of the font!


Images of Effects under IE4+ (and NS6) and under NC4

The code used for the effects above is rendered somewhat differently in the two browsers.
Layers in IE4 Layers in NC4
Layers in IE4 Layers in NC4
Layers in IE4 Layers in NC4
Lake Louise Lake Louise
IE4NC4

© 1997-2002 Jan Smith   <jegs1@jegsworks.com>