Using CSS layers you can make some interesting web pages. This is only a brief introduction to layering. For more information, see Google.com.

Suppose you see some text on a page like this:

You will note that the TOP LAYER is overlaying the BOTTOM LAYER. But that can be switched around like this:

With layering you can place a graphic on your page and then overlay it with text, i.e. you don't need a graphics editor to add text to the graphic!

Here are the basic of layering:

• position: - either relative or absolute. Relative is with regards to the position of the tag that carries the style, e.g. a <DIV> tag. Absolute is with regards to the upper left corner of the page that contains the style.

• z-index: - the layer number. Layers are numbered from the bottom to the top, i.e. the bottom layer is 1 and the top layer is some larger number depending upon the number of layers being used, e.g. with a deck of card if the ace of spaces is the bottom card it is layer 1 and if the ace of hearts if the top card it is layer 52.

• left: - defines the how far left of the top of the layer relative to the current position of the tag carrying the style.

• top: - define the top of the layer relative to the current position of the top tag carrying the style.

• visibility: - whether the layer is visible or hidden. The default value for visibility is visible.

Examples:

<DIV STYLE="position:relative;top:30px;color:blue;font-size:20px;font-weight:bold;z-index:1">This is the blue layer 1</DIV>

<DIV STYLE="position:relative;top:10px;color:RED;left:20px;font-size:30px;font-weight:bold;z-index:2">This is the RED layer 2</DIV>

Which will result in this -

Now to show you how to set text on a graphic. We will use this photo of Arnold Palmer,

and add his name to the photo with white text to get this result:

Here is the code for this effect.

<DIV STYLE="position:relative;z-index:1"><img src="slider2tn.jpg"></div>

<DIV STYLE="position:relative;top:-20px;left:5px;color:white;font-size:15px;font-weight:bold;z-index:2">Arnold Palmer</DIV>

Note that the text is moved up 20 pixels (top -20) and to the right 5 pixels (left + 5) as this is relative to the position of the 2nd <DIV> and not the first <DIV>.

Some experimentation is necessary to find the exact top, left, and font-size so the text will fit nicely on the graphic in the proper place.