A Complete Guide to Web Design

Positioning with Style Sheets 421

CSS

Positioning with Style Sheets

Web Design in a Nutshell, eMatter Edition

Elements with higherz-indexvalues obscure those with lower values. When not
specified, elements appear from back to front in the order in which they appear in
the HTML source.

In Figure 23-6, two ordinary transparent GIFs,A.gifandB.gif, are positioned using
z-indexsettings. In the top image,B.gifis given a higher z-index value and thus
overlapsA.gif. In the bottom image, the positioning code is the same, but this
time,A.gif is given the higherz-index value and comes out on top.

Visibility

The CSS2 specification also includes a new property calledvisibility, which
takes the valuesvisible(the default) orhidden. When an element is hidden, it
is not displayed on the page and the space it occupies is held blank as shown in
Figure 23-7 and the following code.

<STYLE TYPE="text/css">

<!--

EM { visibility: hidden; }

-->

</STYLE>

...

<P>This line contains some <EM>emphasized</EM> text, which will

be hidden.</P>

Figure 23-6: Graphic file with higher z-index value is positioned on top

Figure 23-7: Word is hidden using visibility property

<IMG SRC="A.gif" STYLE="z-index: 1">

<IMG SRC="B.gif" STYLE="z-index: 2;

position: relative; top: 12px; left: -25px">

<IMG SRC="A.gif" STYLE="z-index: 2">

<IMG SRC="B.gif" STYLE="z-index: 1;

position: relative; top: 12px; left: -25px">