Positioning Elements in 3D

Once you start using relative and absolute positioning, it's quite possible to find that your elements have overlapped. You can choose which element should be on top.

To position elements in 3D:

Type z-index: n, where n is a number that indicates the element's level in the stack of objects.

Figure 11.41. When we floated the navbuttons they slid under the description. It's not noticeable at first because the description has a transparent background but when you try to click the links, they balk.

Figure 11.42. We set the z-index level to 1 which pulls the navbuttons div above the description. Notice that we must position the navbuttons div relatively so that the z-index property can work. As long as we don't set the offsets, the navbuttons won't go anywhere.

Tips

• The z-index property only works on positioned elements.

• The higher the value of the z-index property, the higher up the element will be in the stack. You can think of the z-index property as a measure of elevation, with the visitors in an airplane looking down, seeing the elements on the tops of mountains first.

• You can use both positive and negative values for z-index.

• If you have nested items within an element that has a certain z-index, all those nested items are first ordered according to their own individual z-indexes, and then, as a group, ordered in the larger context.

• The z-index property is not inherited.

Figure 11.43. Once the navbuttons div is on top, the links work as expected.