CSS rendering comprises the tasks of laying out and rendering numerous boxes. Element boxes are positioned within a formatting context, which, by default, is provided by the box generated by a parent element.

When we specify the positions or dimensions of element boxes, we’re doing so relative to what’s known as the containing block, which is a very important concept in CSS layout.

The containing block for the root element is called the initial containing block, and has the same dimensions as the viewport for continuous media (such as the screen) and the page area for paged media (such as print).

The containing block for any other element box is determined by the value of the position property for that element.

If the value of the position property is static (the default) or relative, the containing block is formed by the edge of the content box of the nearest ancestor element whose display property value is one of:

• block
• inline-block
• list-item
• run-in (only in a block formatting context; see Formatting Concepts)
• table
• table-cell

If the value of the position property is absolute, the containing block is the nearest positioned ancestor—in other words, the nearest ancestor whose position property has one of the values absolute, fixed, or relative. The containing block is formed by the padding edge of that ancestor.

If the value of the position property is fixed, the containing block is the viewport (for continuous media) or the page box (for paged media).

Note that although positions and dimensions are given with respect to the containing block, a descendant box isn’t constrained by its containing block; it may overflow.