CSS - Containing Block

About

The containing block is a logical block box that defines a coordinate system from where to apply the offset properties

In flow layout, many box positions and sizes are calculated with respect to the edges of this rectangular box.

Not to confound with a container box

A container box is a box that contains one or more other box and creates a ancestor > descendant relationship between boxes.

A containing block is just a box that is created in the positioning algorithm to calculate the position and lay out their children.

Definition

The containing block depends on the positioning model.

If the box position property is With the following ascendant rule The positioning model is Then the containing block is
relative The parent container has a static or relative position relative positioning the box itself after being laid out by the normal flow
absolute An ascendant container has a relative position absolute positioning the first ascendant relative box
or the viewport (ie screen) if none
fixed None fixed positioning an anchored viewport (ie screen)

Documentation / Reference


Powered by ComboStrap