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>.
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.
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.
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:
There is a slight difference between NC4 and IE4 in where the text appear on the image and rendering of the font!
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
IE4 | NC4 |