• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 15. Creating Layers > Changing the Stacking Order of Layers

Changing the Stacking Order of Layers

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 will appear on top.

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

The PMlight70.gif image that you inserted into this layer was created with a transparent background and saved in the GIF image format, which supports transparency. In this exercise, you will adjust the stacking order of the layers to make this layer appear above the landscape layer.

2.
In the layers.html document, select the landscape layer in the Layers panel and drag it downward in the list. Stop dragging and release the layer when a thin black line appears between the lighthouse and textlayer layers in the Layers panel.

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

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

3.
Select the lighthouse layer and move it up in the document window, positioning it so that the lighthouse image appears to be on the ground near the cliff.

Your document will now look similar to the example shown here.

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


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint