Part 8: Positioning
Sometimes floats aren’t enough to create a complex layout. Specifically, position:absolute, position:relative, and position:fixed enable positioning according to a coordinate system and allow elements to be “attached” to the browser.
Absolute Positioning
Before you absolutely position an element, you should understand that it will be removed from the regular document flow: that means that elements that come after it in the HTML source don’t “know” how much space the positioned element takes up, even if you’ve specified a particular height and width. Sometimes you can compensate for this issue by adding margins or padding to the later elements, but doing so relies on the positioned element never changing size or having content added to it.
By the same token, though, position:absolute; is particularly useful for overlapping one piece of content over another. The element you position will be removed from the document flow and moved to a point according to the pixel coordinates you assign. By default, those coordinates are measured from the top left corner of the browser.
Suppose you have the following HTML, and you want to overlay your caption in the upper-right corner of the image.
<div class="container">
<img src="cats.png" alt="My cats" />
<div class="caption">
<p>My cats</p>
</div> <!--/caption -->
</div> <!-- /container -->
We’ll write a rule that positions the caption in the upper-right corner of the image. The position property is almost always accompanied by the top (or bottom) and left (or right) properties. These are distinct from margin-top and margin-left, and they default to 0.
.caption {
position:absolute;
right: 10px;
top:-10px;
}
Relative Positioning
Relative positioning works like absolute positioning, with two important differences: (1) the element is positioned according to the location the element would have been placed in regular document flow, and (2) the element’s height and width are preserved as if the element hadn’t been moved.
This sounds more useful than it is. Most often you will want to use another quirk of relative positioning: setting it on a container of an absolutely-positioned element resets the coordinate “origin” (zero point) to that relatively-positioned element’s top-left corner. This quirk is true for all three kinds of “positioning” that are not the default normal flow, but position:relative; is unique in that it won’t monkey with your container in any other way.
So in our example, we set the container to position:relative;, which has the consequence will then mean that our absolute positioning of the (child) caption will always be in relationship to its container, no matter where that container happens to be on the page.
.container {
position:relative;
}
.caption {
position:absolute;
right: 10px;
top:-10px;
}
Now we can be recycle the container and caption classes many times over on the page, knowing that each caption will always be positioned according to its container’s position.
Fixed Positioning
Fixed positioning positions an element according to the browser window, removing it from the document flow and keeping it there no matter where the user scrolls. It’s often useful for navigation bars, toolbars, or masthead elements that you want to stay on the screen. (Note that mobile Safari — the iPhone’s browser — does not support fixed positioning. Instead, it treats it like absolute positioning).
position:fixed is fairly simple to use, since it doesn’t matter where the element is nested in the source HTML or what comes before or after it:
#menu {
position:fixed;
bottom:20px;
left:20px;
}