Why is position:relative necessary when you're positioning absolutely?

So I'm reading Dan Cederholm's new book, Handcrafted CSS: More Bulletproof Web Design. I'm really liking it.

There is a small example in the intro that deals with absolute positioning that I want to highlight. He's talking about formatting a list of coffee drinks that have a title and a price. The goal is to have the link be the entire line so that it makes it easy for readers to click on their desired cup of coffee.

The original code looks like this:

<ul class="lst">   
<li><a href="#"><em>2.79</em> Latte</a></li>
<li><a href="#"><em>2.99</em> Cappuccino</a></li>
<li><a href="#"><em>1.80</em> Cafe Americano</a></li>
<li><a href="#"><em>2.00</em> Espresso</a></li>
<li><a href="#"><em>10.49</em> Caramel Macchiato</a></li>
</ul>

Cederholm suggests using absolute positioning, with code much like the following (his is part of a larger web page and so I've adjusted it to appear on its own):

ul.lst li {
     list-style-type:none
     }

ul.lst li a   {
     position: relative;
     display:block;
     padding: 7px;
     border-bottom: 1px solid #f3f2e8;
     width:200px;
     text-decoration:none;
     font: .9em Verdana;
     }
    
ul.lst li a:hover {
     background-color:#e0e0e0;
     }
   
ul.lst li a em  {
     position: absolute;
     right: 7px;
     top: 7px;
     font-style:normal;
     }

The result can be seen here.

And though Cederholm says the position:relative line is necessary, he doesn't explain why. The reason is that when you position an element absolutely—in this case the coffee prices, which are em elements—their position is calculated with respect to the nearest positioned ancestor, or if there is none, to the body element. Since he wants the prices to go in the same line as the a element that contains them, he must position the a element. By adding position:relative to the definition for the a element, it becomes positioned, and any descendants that are absolutely positioned will be positioned relative to it. This happens even though he's not defining any offsets; that is, the a elements stay in their natural place in the flow.

You can find more information about relative and absolute positioning on pages 178-179 in my HTML, XHTML, and CSS, Sixth Edition: Visual QuickStart Guide.

Also note that Cederholm concludes this example by showing how absolute positioning is not very flexible for text elements. That is, when the text is enlarged, the name of the coffee and its price overlap each other. Instead, absolute positioning makes more sense if one of the pieces is a static image whose size can always be accounted for.

Publishing a Blog with Blogger: Visual QuickProject Guide, Second Edition

Hot off the presses, I got mine today.

This brand new Second Edition of Publishing a Blog with Blogger: Visual QuickProject Guide is completely updated and covers all of Blogger's great new features for writing, designing, and earning money from your blog. Perhaps the most important of these is the ability to add new page elements (or widgets) to your blog, and then customize and reorder them to make your blog look and act just like you want it to. You can use these new widgets to add blog rolls, slideshows, search boxes, polls, tag clouds, custom HTML or JavaScript, and many other elements. This book will show you how.

You'll also learn how to use Google's visitor tracking tools to see how many people visited your blog, what they looked at, and where they came from—even what they typed to find you. You can use this information to better assess how effective your blog posts are and what your readers are interested in. And then you'll learn how to add Google ads to your blog with AdSense to earn money from your writing.

The great thing about Visual QuickProject Guides is that they show you—through copious illustrations—just what you have to do, without bogging you down in lengthy explanations. Here's what a sample spread looks like (click to download the PDF):