untitled

(John Hannent) #1

Playing with Positions ................................................................................


Setting the CSS positionproperty to absoluteenables you to superimpose
elements to your heart’s content. The following sample code paints text on
top of text. This is also one way of adding simple shadows (merely offset the
absolute positions by a small amount, as in this example). Also notice that
the order in which you place these divisions matters: They’re painted on the
browser window in the order in which they’re listed. So, in this example, the
last div, colored hot pink, is on top of the other two. Its characters are super-
imposed on the other text, as shown in Figure 19-2.

<HTML>

<HEAD>
</HEAD>

<BODY”>

<DIV style=”position: absolute;
top: 35px;
left: 150px;
color:lightgreen;
font-size: 90pt “>
SUPER
</DIV>

<DIV style=”position: absolute;
top: 98px;
left: 181px;
font-size: 40pt;
font-style: italic;
letter-spacing: .9cm;
color: gray;”>imposition
</DIV>

<DIV style=”position: absolute;
top: 95px;
left: 179px;
font-size: 40pt;
font-style: italic;
letter-spacing: .9cm;
color: hotpink;”>imposition
</DIV>

</BODY>
</HTML>

Chapter 19: Ten Topics That Don’t Fit Elsewhere in the Book (But Are Important) 337

Free download pdf