HTML and CSS Reference
In-Depth Information
.
Output
FIGURE 8.20
Use of negative
absolute
positioning.
Controlling Stacking
CSS provides a way of taking control over how overlapping elements are presented. The
z-index
property defines stacking order for a page. By default, elements that appear in
the same layer of a document are stacked in source order. In other words, an element that
appears after another in the HTML source for the page will generally be stacked above it.
By assigning
z-index
values to elements, however, you can put elements in specific
stacking layers. If all elements appear in stacking layer 0 by default, any element in
stacking layer 1 (
z-index: 1
) will appear above all elements in layer 0. The catch here
is that
z-index
can be applied only to elements that are placed using absolute or relative
positioning. Elements that are placed using static positioning always appear below rela-
tively or absolutely positioned elements. The stacking layers below 0 are considered
beneath the body element, and so they don't show up at all.
TIP
If you want to have an element positioned as though it were part
of the static positioning scheme but you want to control its stack-
ing layer, assign it the relative positioning scheme and don't spec-
ify a position. It will appear on the page normally but you will be
able to apply a
z-index
to it.
Let's look at another page. This one contains two paragraphs, both part of the same
(default) stacking layer. As you can see in Figure 8.21, the second overlaps the first.
