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

Lesson 10. 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 over the top of 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.htm document, select textlayer and change the z-index text field located on the property inspector to 3, or select picturelayer in the Layers panel and drag it downward in the list. Stop dragging and release the layer when a highlighted area appears between the layers.

TIP

Do not release the layer when it is over the top of another layer. Doing so will nest the layers instead of changing their stacking order. When changing the stacking order, you should clearly see the area between the layers become highlighted.

You can change the z-index for each layer separately by using the z-index text field on the property inspector. However, using the Layers panel to change the stacking order of layers is much easier than entering specific z-index values on the property inspector, because you don't have to keep track of the values or the order in which they appear in the code.

NOTE

If <LAYER> or <ILAYER> tags are used, the A/B (Above/Below) option in the property inspector specifies the relative stacking order of layers. A/B is not available for any other types of layer tags. Using this option, a layer can be set on top of (above) or under (below) the current layer in the stacking order or z-index. To set the layer order with the A/B option, choose Above or Below from the A/B drop-down menu, and then select a layer name from the drop-down menu to the right. The layer selected from the menu will then appear above or below the current layer. Check the layer ID in the upper-left corner of the property inspector to verify which layer is currently selected.

2.
Save the document.

Leave this file 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