Containing Block
CSS rendering comprises the tasks of laying out and rendering numerous boxes. Element boxes are positioned within a formatting context, which, by default, is provided by the box generated by a parent element.
When we specify the positions or dimensions of element boxes, we’re doing so relative to what’s known as the containing block, which is a very important concept in CSS layout.
The containing block for the root element is called the initial containing block, and has the same dimensions as the viewport for continuous media (such as the screen) and the page area for paged media (such as print).
The containing block for any other element box is determined by the
value of the position property for that element.
If the value of the position property is
static (the default) or
relative, the containing block is formed by the edge
of the content box of the nearest ancestor element whose
display property value is one of:
blockinline-blocklist-itemrun-in(only in a block formatting context; see Formatting Concepts)tabletable-cell
If the value of the position property is
absolute, the containing block is the nearest
positioned ancestor—in other words, the nearest ancestor whose
position property has one of the values
absolute, fixed, or
relative. The containing block is formed by the
padding edge of that ancestor.
If the value of the position property is
fixed, the containing block is the viewport (for
continuous media) or the page box (for paged media).
Note that although positions and dimensions are given with respect to the containing block, a descendant box isn’t constrained by its containing block; it may overflow.
The content edge of a box is defined by the outer limits of the content area—it doesn’t include any padding that may exist outside the content.
The padding edge of a box is defined by the outer limits of the padding area—it doesn’t include any borders that may exist outside the padding. If a box has no padding, the padding edge is equivalent to the content edge.
Refer to The CSS Box Model for a graphic illustration of these concepts.
User-contributed notes
- ID:
- #2
- Date:
- Tue, 29 Jan 2008 13:44:51 GMT
> If the value of the position property is absolute, the containing block is the nearest positioned ancestor
I am aware that this is implicitely stated in the paragraph about the "intial containing block", but should it perhaps be explicitely mentioned that if no such positioned ancestor exists, then the containing block for an absolutely positioned element is the root element "html" and NOT "body"?
