HTML and CSS Reference
In-Depth Information
.
Output
FIGURE 8.19
A page that
uses absolute
positioning.
8
Aside from the fact that there are now four absolutely positioned
<div>
s on the page
exactly where I indicated they should be placed, a couple of other things should stand
out here. The first item to notice is that when you absolutely position elements, there's
no placeholder for them in the normal flow of the page. My four
<div>
s are defined at
the top, and yet the first paragraph of the text starts at the beginning of the page body.
Unlike relative positioning, absolute positioning completely removes an element from the
regular page layout. The second interesting fact is that absolutely positioned elements
overlap the existing content without any regard for it. If I want the text in the paragraphs
to flow around the positioned elements, I have to use
float
rather than
position
.
Not only can I use any unit of measurement when positioning elements, I can also use
negative numbers if I choose. You already saw how I applied a negative value to the top
of the relatively positioned element to move it up some; I can do the same thing with
these absolutely positioned elements. The result of changing the rule for the
topleft
class in the earlier example to
Input
▼
#topleft {
position: absolute;
top: -30px;
left: -30px;
}
is that it actually pulls the element partially off of the page, where it is inaccessible even
using the scrollbars, as shown in Figure 8.20.
