The positions and size of an element is almost always calculated relative to a rectangle called the containing block of that element.

Such a block is defined according the following list:

  1. The containing block of a root element is called initial containing block.
  2. If the element's position is relative or static, the containing block is formed by the content's edge of the nearest block container ancestor box.
  3. If the element's position is fixed, the containing block is defined by the viewport or the page area, depending the media is continuous or paged.
  4. If the element's position is absolute, the containing block is defined by the nearest ancestor with a position absolute, relative or fixed and in this way:
    • if the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element;
    • otherwise the containing block is defined by the padding edge of the ancestor.

Naturally, in case of not having a regular ancestor, the ancestor role will be occupied by the initial containing block.

In the case of paged media, if the absolutely positioned element's content ends up on a page other then the current one (i.e. page break); the printer may place the content on another location on the current page or on a subsequent page and perhaps even omit it.

Example

CSS containing blocks examples:

 

›› go to examples ››