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:

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:

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:

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.