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

The z-index controls the order of the stack of elements which have this property. In NC4 layers are preferred to create effects, as shown below, although divisions can be used also. Since under NC4 divisions do not have events, that restricts what one can do with them.

Under IE4+ and NS6, LAYERS are ignored, so this page won't look like much! Images of the effects under NC4 are the bottom of the page. See also the examples using <DIV>.

Under NC4 a LAYER is positioned absolute by default. To do relative positioning you must use ILAYER, an inline layer. In the examples below, the layers for an example are contained in an ILAYER and are positioned absolutely within it. For some reason this is adding extra space. Haven't figured out why yet.


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 have their LEFT property set at 0, 100, 200, & 300, while having the same TOP value. The BACKGROUND of the first three is set from the CLASS. The fourth layer has BGCOLOR set in the tag itself. Notice what a difference this makes in how much color shows!


First Layer
at start
Second Layer Third
Layer
Fourth layer

The stack of layers above have LEFT set to 0, 10, 20, & 40 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

By changing the z-index of the First Layer to 4, we have brought it to the top. We also reduced the z-index of the other layers 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

Images of Z-Index Effects with <LAYER> under NC4

Layers in NC4
Layers in NC4
Layers in NC4
Lake Louise in NC4

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