Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Part 2: Setting the Z-Index
In this part, you'll learn about the z-index property, which controls how layers are stacked on top of one another. By the end of this section, you'll have all the layers positioned and stacked appropriately. This section is titled part two of four, but you're more than halfway done!
Understanding How Z-Index Works
A layer's z-index property controls whether a layer appears above or below other layers that overlap it. If there are two layers are on a page—one layer with a z-index of 1 and another with the z-index of 2—the layer with the z-index of 2 will appear above the layer with a z-index of 1, as shown in Figure 27.
)
Figure 27 One layer overlapping another based on their z-index
values.
DHTML Drop-Down Menu Design
This design works as follows: When a user moves the mouse over the Products graphic in the mainnav layer, DHTML code will tell the dropdown and hidedropdown layers to appear. The user will then see the drop-down menu and be able to interact with it.
When a user moves the mouse off the dropdown layer, the pointer will touch one of three areas:
The Products graphic in the mainnav layer
The Contact Us graphic in the mainnav layer
The transparent graphic in the hidedropdown layer
If the Products graphic is touched, the dropdown layer remains visible.
If the Contact Us graphic is touched, DHTML code hides the dropdown and hidedropdown layers.
If the transparent graphic is touched by the mouse pointer, DHTML code hides itself and the dropdown layer.
So, let's walk through each criteria and ensure that your z-index is set correctly for each layer. (You can see the z-index of each layer in the Layers panel.)
The dropdown layer must appear above all other layers. That looks fine; its z-index is 7, the highest of all layers.
The mainnav layer must be above all other layers except the dropdown layer. Based on the Layers panel, the only layer that overlaps the mainnav layer is the dropdown layer, so that's fine.
The hidedropdown layer must be below the dropdown layer and the mainnav layer, but above all the others. Based on the Layers panel, it looks like the logonavdivider layer's z-index needs to be changed to a number lower than the hidedropdown layer's z-index.
In the next examples, you'll learn how to change a layer's z-index a couple of different ways:
Changing the Z-Index Value in the Layers Panel
In the last section, you determined that the logonavdivider layer needs to have a lower z-index value than the hidedropdown layer. The easiest way to accomplish this is through the Layers panel: Simply drag and drop the logonavdivider below the hidedropdown layer, as shown in Figure 28.
)
Figure 28 Drag and drop a layer to change its z-index.
The really cool thing about using the drag-and-drop technique is that the Layers panel automatically updates the z-index value of all the other layers to ensure that they appear correctly. After dropping the layer in its new position, Dreamweaver changed its z-index value from 6 to 2.
Another way you can change the z-index value through the Layers panel is to click the value in the Z column and then type in the new value. Figure 29 illustrates changing the z-index value of the dropdown layer from 7 to 9.
)
Figure 29 Manually changing the z-index value of a layer through the
Layers panel.
After typing in the new number, press Enter. Your layer's z-index value will be updated. If it requires moving it up or down in the Layers panel, Dreamweaver takes of that, too.
Let's move on to setting the initial visibility status of your layers.