About
The containing block 1) 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) |