Changing the Stacking Order of Layers | Macromedia Dreamweaver 8: Training from the Source

You can use either the Property inspector or the Layers panel to change the stacking order of layers by adjusting the z-index of each layer. The z-index determines the order in which layers are drawn in a browser. A layer with a higher z-index number appears to be laid atop layers with lower z-index numbers. Values can be positive or negative. This is particularly useful when you have overlapping layers and you need to specify which layer(s) will be atop others. It is also possible for more than one layer to have the same z-index number, in which case the layer that appears in the code first appears on top.

In the layers.html document, select the class layer and drag it upward until it partially overlaps the om layer. Preview your page in the browser.

Tip

When working with images in layers, you can create images with transparent backgroundssaved in the GIF image format, which supports transparency. Using images with transparent background in layers over other images can give a more layered visual effect.

In the following steps of this exercise, you will adjust the stacking order of the layers to make the om layer appear above the class layer.

Select the class layer in the Layers panel and drag it downward in the list, below the om layer. Stop dragging and release the layer when a thin black line appears between the class and textlayer layers in the Layers panel.

You will see the changes applied in the Layers panelthe class layer now appears between the om and textlayer layers. The z-index numbers on the Layers panel also change automatically. It can be easier to change the stacking order when you move layers in the Layers panel than it would be to change the z-index values yourself via the Property inspector because Dreamweaver automatically changes the z-index values.

The class layer's z-index text field located on the Property inspector has changed from 4 to 2.

Your document now looks similar to the example shown previously.

Save this file and leave it open for the next exercise.