Understanding Style Sheets (part 2) - The View From The Top (
Page 7 of 8 )
Perhaps one of the best things about CSS is the fact
that, for the first time, a Web developer has the ability to precisely position
different HTML elements on a Web page. The three properties that allow you to
do this are "position", "left" and "top" - remember them, because you're going
to be using them very, very often in your CSS endeavours!
The "position" property allows to you to define the type of positioning for an
element - options are "absolute" or "relative". This property is used in tandem
with the "top" and "left" properties, which specify the top and left coordinates
for the element under consideration.
Absolute positioning allows you to place an element anywhere on a page, with
no regard to the positions of the elements around it, while relative positioning
allows you to specify position relative to other elements on the page. Of the
two, absolute positioning is more common, since it's easier to specify an absolute
location (which remains unchanged) than a relative location (which can change
as the elements around it shift position).
Here's an example of how you can use these properties to precisely position blocks
of text:
<HTML>
<HEAD>
</HEAD>
<BODY>
<DIV STYLE="position: absolute;
top:10; left:50; font-family: Verdana;
font-size: 35pt; color: green">
Q. How
many Sicilians does it take to change a lightbulb?
</DIV>
<DIV STYLE="position:
absolute; top:140; left:300; font-family: Verdana;
font-size: 20pt; color: blue">
A.
Two. One to change it, and
</DIV>
<DIV STYLE="position: absolute; top:180;
left:50; letter-spacing:5px;
font-family: Verdana; font-size: 33pt; color: red">
one
to kill the witnesses.
</DIV>
</BODY>
</HTML>.
You can also make certain elements invisible with the "visibility" property,
which accepts the values "visible" and "hidden" - take a look:
<HTML>
<HEAD>
</HEAD>
<BODY>
<DIV STYLE="position: absolute;
top:10; left:50; font-family: Verdana;
font-size: 35pt; color: green">
Q. How
many Sicilians does it take to change a lightbulb?
</DIV>
<DIV STYLE="visibility:
hidden">
A. Two. One to change it, and
</DIV>
<DIV STYLE="position: absolute;
top:180; left:50; letter-spacing:5px;
font-family: Verdana; font-size: 33pt; color:
red">
one to kill the witnesses.
</DIV>
</BODY>
</HTML>
/ 25 
