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.
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.
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) |