JavaScript Examples Bible - UserWorks Technologies

zIndex
Compatibility ✓
Chapter 15 ✦ The NN4 Layer Object (Chapter 31)
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Example
The relationships among the three stacking property values can be difficult to visualize.
Listing 31-9 offers a way to see the results of changing the layerObject.zIndex
properties of three overlapping sibling layers. Figure 15-4 shows the beginning organization
of layers after the page loads.
Figure 15-4: A place to play with zIndex property settings
The sequence of the tags in the document governs the original stacking
order. Because the attribute is not set in the HTML, the initial values appear as zero
for all three layers. But, as the page reveals, the layerObject.above and
layerObject.below properties are automatically established. When a layer has no
other layer object above it, the page shows (none). Also, if the layer below the
bottom of the stack is the main window, a strange inner layer name is assigned
(something like _js_layer_21).
To experiment with this page, first make sure you understand the
layerObject.above and layerObject.below readings for the default order of
the layers. Then, assign different orders to the layers with value sequences such as
459
document.layerObject.zIndex