HTML and CSS Reference
In-Depth Information
Figure 11-6.
Relative positioning doesn't affect the position of surrounding elements
Admittedly, this isn't very useful. Strange though it may sound, one of the most common uses of relative
positioning is to leave the element exactly where it was in the first place. The reason for doing so is to create a
containing block for an absolutely positioned element nested inside. Because a relatively positioned element
remains within the normal document flow, it moves in harmony with other elements if the page is reflowed for
any reason, such as the browser being resized. Using it as the containing block for an absolutely positioned one
keeps the two elements in sync, preventing the absolutely positioned element from moving out of alignment
with the rest of the page.
Using Absolute Positioning
There are two important differences between absolute and fixed positioning, namely:
•
The offsets in fixed positioning are always calculated with reference to the browser
viewport. With absolute positioning, the offsets are calculated with reference to the
element's containing block—sometimes this is the page, but not always.
•
With fixed positioning, the element never moves. An absolutely positioned element is
anchored to its containing block, and it scrolls with the rest of the page.
To demonstrate the importance of the containing block, absolute_page.html and absolute_relative.html
both contain the following HTML markup:
<div class="figure floatleft"><img src="images/nice seafront.jpg" alt="Nice seafront"
width="400" height="266">
<img src="images/destination.png" width="150" height="118"
alt="Great destination">
<div class="figcaption">Nice seafront from la Colline du Château</div>
</div>
