Containing block

Reference: CSS 2.2 Visual formatting model details - Definition of "containing block"

1. Initial containing block
2. Elements with position: static, relative & sticky
3. Elements with position: fixed
4. Elements with position: absolute

Many properties in CSS are calculated according to a box's containing block. How to calculate this block is described here.

Initial containing block

The initial containing block has the position and size of the viewport. The root element's containing block is the initial containing block.

Elements with position: static, relative & sticky

For elements with a position of static, relative or sticky the containing block is formed by the nearest ancestor which either:

• Is a block container
• Establishes a formatting context (note anything that establishes a block or inline formatting context is always a block container, so this criteria doesn't apply. This applies for things like table, grid, flex or ruby perhaps?)

Elements with position: fixed

For elements with a position of fixed the containing block is the initial containing block:

Elements with position: absolute

For elements with a position of absolute, the containing block is formed by the nearest ancestor that has a position of absolute, relative or fixed. There are two situations:

1. The ancestor is an inline element, then the containing block is the bounding block around the padding of the first and last inline boxes generated for the element. If the inline box spans multiple lines the containing block is undefined.
2. All other cases the containing block is formed by the padding edge of the ancestor.