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:
- The containing block of a root element is called initial containing block.
- 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.
- 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.
- 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:
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.
CSS containing blocks examples: