Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When does a relatively positioned box establish a new containing block?

In CSS2.2, 9.4.3 Relative positioning, it is stated that:

A relatively positioned box keeps its normal flow size, including line breaks and the space originally reserved for it. The section on containing blocks explains when a relatively positioned box establishes a new containing block.

And the section on containing blocks is:

In CSS 2.2, many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block. In general, generated boxes act as containing blocks for descendant boxes; we say that a box "establishes" the containing block for its descendants. The phrase "a box's containing block" means "the containing block in which the box lives," not the one it generates.

Each box is given a position with respect to its containing block, but it is not confined by this containing block; it may overflow.

The details of how a containing block's dimensions are calculated are described in the next chapter.

which I don't think really "explains when a relatively positioned box establishes a new containing block."

My question is: does a relatively positioned box establish a new containing block when and only when it has descendant(s), just like boxes which are not relatively positioned? If so, why adding a reference to containing blocks in the section on relative positioning?

like image 707
nalzok Avatar asked Oct 16 '25 23:10

nalzok


1 Answers

One difference is when the relatively positioned box is an inline box. An inline box is not normally a containing block, so, for example, a floated element which is the child of an element with display:inline; does not move to the edge of its parent element, but to the edge of its ancestor element which does establish its containing block.

But an inline box which is relatively positioned does establish the containing block for its absolutely positioned descendants. See the second and third examples at 9.8.4 Absolute positioning

like image 161
Alohci Avatar answered Oct 19 '25 11:10

Alohci