Dan's Layers Tutorial
1.2  Overlapping Layers

Layers have the name they do because they can be overlapped like transparent sheets of paper. You have to be aware of the stacking order. By default, layers are stacked in the order you define them. Whichever layer you define first, will be on the bottom. But you can override this by using the Z-INDEX attribute in the layer tag. You could set one layer to have a Z-INDEX=1 and then later you could assign another layer to have a Z-INDEX=0 so that it's below the other layer.

Some examples:

This is an example of transparent layers (no BGCOLOR). Notice in this example I did not specify the HEIGHT and WIDTH of the layers. If you don't, the layer will assume a default size that will contain all text or images you put in there.

Yes, if you use a transparent GIF, the transparent portion will show through.

This is an example of opaque layers (with BGCOLOR). These will be used for a majority of the examples in this tutorial.

This example has 4 blocks, each a different color, and I have assigned a specific stacking order. Using Z-INDEX can help you keep your layers laid out in a logical order, and still stack them the way you want.

Look at the source code an any of these to see exactly how they were done done.


Dan's Layers Tutorial
1.1 Introduction
1.2 Overlapping
1.3 Nesting
1.4 Using JavaScript		 2.1 Sliding Layers
2.2 Pre-Built Functions
2.3 Clipping Layers
2.4 Looping Animations
2.5 Changing Images		 3.1 Mouse-Click Animation
3.2 Capturing Keystrokes
3.3 Drag and Drop
4.1 Making Demos
4.4 Problems
4.5 Screen Sizes


Copyright © 1997 Dan Steinman. All rights reserved.