Absolute positioning detaches the element from other objects — its position is
not relative to them. It’s independent. It is located in the browser window some
specified distance over from the left side and down from the top. You provide
the topand leftproperties, starting with top: 0px; left: 0px, which
would butt the element up against the top left corner of the browser window.
(Technically, the top and left properties describe an element’s location within
its containing block— but I leave that concept for a later discussion.)To see how absolute positioning affects an image, try this example:<html>
<head>
<style>
.absol {position: absolute; top: 0px; left: 0px;}
</style>
</head>
<body>
<h1>This Is The Headline</h1>
<p>
This is a paragraph of text.
</p>
<p>This is paragraph two.</p>
<img class=”absol” src=”lake.jpg”></body>
</html>This example illustrates how positioning the graphic at 0,0 (absolute) causes
it to partially cover a headline and completely cover a paragraph of body
text. The headline and text are flowing (stacking in order of their appearance
on the HTML document). The image, however, is third in the stacking order,
yet positioned first: It’s absolutelydisplayed up against the top left, as shown
in Figure 4-4:Figure 4-4:
Mixing
flowed with
absolute
elements
can cause
one to cover
another, like
this graphic
that covers
a headline.