The Z-Factor in Style Sheets

The Z-Factor in Style Sheets

“z-index” property, 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>

Leave a Reply

You must be logged in to post a comment.


All material @ copyrighted by chrisranjana.com. If you want to link to this article you are welcome to do so. Unauthorized publication is strictly prohibited. This developer tutorial website contains articles by Php programmers , Software developers, Mysql programmers and asp c# programmers. This website also contains ajax tutorials and advanced mysql sql stored procedures and functions tutorials and sample codes.