The Containing Block | Cascading Style Sheets: Designing for the Web (3rd Edition)

Normal (static) elements are placed relative to their parent and to elements that precede them, as explained in Chapter 7. Positioned elements are placed relative to so-called containing blocks, which may be their parents, but are usually some ancestor higher up in the document tree.

The containing block for a fixed positioned element is always the viewport (in the case of scrolling media, such as most browsers) or the page box (in the case of paged media). The parent, or even any other positioned elements, has no influence on the position of an element with position: fixed.

Relatively positioned elements, like normal static elements, don't have a containing block. The positioning properties bottom, left, top, and right move the element up, right, down, or left from its normal position. However, relatively positioned elements can be the containing block for absolutely positioned elements.

The containing block for an absolutely positioned element is usually the viewport; i.e., the absolutely positioned element is placed somewhere inside the window or on the page with the help of the top, right, bottom, and left properties. However, if the element is inside some other positioned element (either absolute, relative, or fixed), that element will be its containing block.

Fixed elements stay fixed to the window. If the window has a scroll bar, the fixed elements do not move with the scroll bar. Absolutely positioned elements, even if they are initially placed relative to the window, move along with the scroll bar. The next sections describe each type of positioning in detail.

Here is an example: Consider the following HTML fragment. The two DIVs are each absolutely positioned. The first one will, therefore, be put at a certain distance from the edges of the viewport; the second, because it is inside the first, will be positioned relative to the first DIV:

 <HTML>   <STYLE>     DIV.outer { position: absolute;       top: 1cm; right: 2cm; width: 4cm }     DIV.inner { position: absolute;       top: 1cm; left: 1cm; width: 2cm }   </STYLE>   <BODY>     <H1>Static header</H1>     <P>Static paragraph.     <DIV >       <P>Some text in outer...       <DIV >         <P>Some text in inner...       </DIV>     </DIV>     ...

The output may look like Figure 9.2.

Figure 9.2. Example of absolute positioning: one box is positioned relative to the top and right of the viewport, and the other to the top and left of the first box.

The edges that are used for positioning are the inside and outside of the border: the containing block is formed by the padding edges (the inside of the border) and the top, right, etc., are measured from there to the border edge (the outside of the border) of the absolutely positioned box. When an absolutely positioned element is inside some other absolutely positioned element, or inside a fixed positioned element, it is easy to establish the edges of the containing block. However, if the absolutely positioned element is inside a relatively positioned element, a complication may arise: If the relatively positioned element is inline, it may have been broken over several lines, and thus it has several boxes; which of them is the containing block for the absolutely positioned box inside?

What happens is that the top and left edges of the first of the inline boxes become the top and left edges of the containing block. The bottom and right edges of the last inline box become the bottom and right edges of the containing block. Figure 9.3 shows how this works. The image also shows that the right edge may easily end up to the left of the left edge! It may be difficult to predict where elements will be placed in such a case. So, be careful when putting absolutely positioned elements inside relatively positioned ones.

Figure 9.3. An image is placed near the upper-left corner of an inline element. The inline element consists of two boxes: The first one determines the upper-left corner of a containing block, the last one the bottom right (indicated by dotted lines).

The code for this fragment is as follows. The SPAN element has been made relative, but without actually positioning it. It serves only as a containing block for the absolutely positioned image inside it.

 <STYLE>   SPAN.star { position: relative;     font-weight: bold }   IMG.star { position: absolute;     top: -10px; left: -10px; z-index: -1 } </STYLE> ... cleared for <SPAN ><IMG  src="/books/2/664/1/html/2/star.png" ALT="">grazing and cultivation</SPAN>, often by burning,...