[CSS] Containing Block

Identifying the containing block

The process for identifying the containing block depends entirely on the value of the element's position property:

1. If the position property is static, relative, or sticky, the containing block is formed by the edge of the content box of the nearest ancestor element that is either a block container (such as an inline-block, block, or list-item element) or establishes a formatting context (such as a table container, flex container, grid container, or the block container itself).

2. If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).

3. If the position property is fixed, the containing block is established by the viewport (in the case of continuous media) or the page area (in the case of paged media).

4. If the position property is absolute or fixed, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has any of the following:

   • A filter, backdrop-filter, transform, or perspective value other than none.
   • A contain value of layout, paint, strict or content (e.g. contain: paint;).
   • A container-type value other than normal.
   • A will-change value containing a property for which a non-initial value would form a containing block (e.g. filter or transform).
   • A content-visibility value of auto.