Using z-index property to stack layers in Microsoft Expression Web 2

What makes Layers so popular is their ability to overlap each other and create certain effects. You can have images and text that could be placed over each other.

 The z-index property is used to set the stack order of an element. So an element with a greater stack order (higher z-index value) is always positioned in front of the element with lower stack order (a lower z-index value). Z-index can be negative. But z-index works for only those elements that are positioned (absolute or relative).

Let me take you through an example to make things simpler. Look at the image below:

 

layers_b4

I have added three layers in following order: layer 1, layer 2 and layer 3. Therefore their default z-index values are as shown below in the Layers task pane:

 

layers_taskpane

Since z-index for layer 1 is the lowest among all, viz. 1 it below layer 2 and 3. Again layer 2 has a lower z-index of ‘2’ than that of layer 3; layer 3 is above layer 2. When no z-index property is specified, elements are rendered on the default rendering layer 0 or 1.

Change the z-index property

Now if you want to change the order in which the layers are displayed, double click on the z-index displayed against the layer id in the Layers task pane, and enter the new value. In above example, if you have to overlap layer 3 with layer 2 as shown below:

 

layers_id

All you have to do is set z-index for layer 2 to ‘4’.  Since z-index for layer 3 is ‘3’ which is lower than 4, a lower z-index value would put it below the element with higher z-index value. In this example you could also swap the z-indexes of layer 2 and 3 to achieve the same result. Similarly you can adjust the z-indexes to arrange your layers.

NOTE: If multiple elements share the same z-index value, they are placed on the same layer level.

Filed Under: Expression Web

Tags:

About the Author: Minal is a freelance web and graphics designer. She specializes in designing Logos, Stationery, Graphics and Icons as well as website templates using graphical tools like Photoshop, Illustrator and Expression Web. Twitter @saffronstroke

RSSComments (2)

Leave a Reply | Trackback URL

  1. Vikas Goyal says:

    It is a very useful post.

    Vikas Goyal

Leave a Reply