Absolute Positioning: To Another Block

Returning to the earlier example in which I described a containing block for the content block, you can move on to see how an absolutely positioned block is positioned only in relation to its containing block (see Example 12-4).

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).

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.