Absolute Positioning: Example
We'll start with two paragraphs, this small one and the tiny paragraph following.
Tiny paragraph.
Next we'll use absolute positioning to block out part of this paragraph. Next we'll use absolute positioning to block out part of this paragraph. Next we'll use absolute positioning to block out part of this paragraph. Next we'll use absolute positioning to block out part of this paragraph.
Tiny paragraph.
Here's the relevant code for the blue-bordered box:
.home-base { position: relative; } .tiny2 { position: absolute; left: 170px; top: 30px; } <div class="home-base"> <p>Next we'll use absolute positioning to block out...</> <p class="tiny2">Tiny paragraph.</p> </div>
In the markup for the text in the two boxes with the green and blue borders, the "tiny paragraph" follows the paragraph with which it is paired. Without positioning, the "tiny paragraph" would be in the normal page flow and so would follow its partner in the page display. In fact, in the green-bordered paragraph, "tiny" is not positioned and so appears in normal flow. In the blue- bordered box, "tiny" is positioned absolutely, which — I guess — is obvious.
To prepare the absolutely positioned paragraph properly, I had to give
it a "home base." I did this by placing it in a <div>. But simply
placing it in a <div> is not enough to create this home base,
because the <div> will have {position:
static} — unless I intervene and change its position. I did this
by giving the <div> "home-base" a position of "relative." Simply
doing this gives the absolutely positioned box a new point of reference. Without
this new point of reference, the positioned box would use <body>
as its point of reference, and the browser would count off the 170 and 30 pixel
values from the top of the page.