Example 12-4. Absolutely positioning a block to its containing block
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
#main {
position: absolute;
left: 50px;
top: 20px;
border: 1px solid green;
}
#content {
position: absolute;
left: 100px;
top: 50px;
width: 300px;
border: 1px solid red;
background-color: #ccc;
}
ul, li, a {
list-style-type: none;
display: inline;
text-decoration: none;
}
</style>
</head>
<body>
<div id="main">
<div id="nav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="content">
<h1>The Black Cat</h1>
<p>I married early, and was <a href="http://www.sitename.org/">happy to find</a> in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p>
</div>
</div>
</body>
</html>
Here, the containing block main is absolutely positioned 50 pixels from the left and 20 pixels from the top. The navigation block isn't positioned at all, but it is contained within the main and, therefore, flows normally within its block. I've provided some minimal style so you can see this coming together. Finally, the content div is absolutely positioned. Watch what happens (see Figure 12-7).
Figure 12-7. Absolutely positioning the content div to its containing block.
Note the two circles in the image. The first one highlights the starting point of the containing block, main. The second highlights the starting point of the content block. Notice how the content block is positioned to the containing block: 100 pixels in from the left of the containing block, 50 pixels from the top of the containing block.
The box now sits 150 pixels from the left and 70 pixels from the top. The reason is clearly because it's being positioned in relation to the position of its containing block, not the html element or the browser viewport.
A containing block does not have to be positioned absolutely. The positioning scheme as described remains in effect no matter what the position type is: An absolutely positioned box always is positioned to its containing block, and it is always removed from the normal flow, with no exceptions.