Understanding Style Sheets (part 2) - The Z-Factor (
Page 8 of 8 )
And finally, when you're talking about positioning,
you can't omit the "z-index" property, which allows you to specify the "stacking
order" of layers placed one above the other. A higher z-index value pushes an
element up, while a lower value pulls it down (relatively speaking, of course.)
One of the more common uses of the "z-index" property is to create a drop shadow
- the next example will demonstrate this:
v
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.level1 {position: relative;
top: 15; left: 25; z-index: 10; color: #00000;
font-family: Arial; font-size:25pt}
.level2
{position: relative; top: -22; left: 28; z-index: 6; color:
#ADADAD; font-family:
Arial; font-size:25pt}
.level3 {position: relative; top: -59; left: 29; z-index:
6; color:
#ADADAD; font-family: Arial; font-size:25pt}
</STYLE>
</HEAD>
<BODY>
<DIV
CLASS="level1">Scared of my shadow? Nah!</DIV>
<DIV CLASS="level2">Scared
of my shadow? Nah!</DIV>
<DIV CLASS="level3">Scared of my shadow? Nah!</DIV>
</BODY>
</HTML>
That just about covers most of the common style sheet properties you'll be using.
There are quite a few more defined in the official specification, but they're
plagued by spotty or no browser support, which reduces their usefulness substantially.
If you're interested, though, do check out the official CSS2 specification, available
at
http://www.w3.org/TR/REC-CSS2
See you soon!
/ 25 
