CSS:ContainingBlock

lastmod 2025-03-06created 2021-09-025 edits

The size and position of an element are often affected by its containing block. In most cases, the containing block of an element is the content area of its nearest block-level ancestor, but this is not always the case. This page looks at the factors that determine the containing block of an element.

Box Model

When a user agent (such as a browser) lays out a document, it generates a box for every element. Each box is divided into the following four areas.

• Content area
• Padding area
• Border area
• Margin area

Many developers believe that the containing block of an element is always the content area of its parent, but that is not necessarily true. Let's look at what determines the containing block.

Effects of the containing block

Before looking at what determines the containing block, it is useful to know why the containing block matters in the first place.

The size and position of an element are often affected by its containing block. Percentage values used for the width, height, padding, and margin properties, and the offset properties of absolutely positioned elements (absolute, fixed, etc.), are computed from the element's containing block.

Identifying the containing block

The process for identifying the containing block depends entirely on the position property.

• If the position property is static, relative, or sticky, the containing block is formed by the edge of the content area of the nearest ancestor block container (an element such as inline-block, block, or list-item), or of the nearest ancestor that establishes a formatting context (table, flex, grid, or the block container itself).
• If the position property is absolute, the containing block is the padding area of the nearest ancestor whose position value is not static (fixed, absolute, relative, sticky).
• If the position property is fixed, the containing block is the viewport or the page area (in paged media).
• If the position property is absolute or fixed, the containing block may also be the padding area of the nearest ancestor that meets one of the following conditions.
  • The transform or perspective (en-US) property is not none.
  • The will-change property is transform or perspective.
  • The filter property is none. (In Firefox, this also applies when will-change is filter)
  • The contain property is paint.

Troubleshooting

position: absolute is not positioned correctly

See #Identifying the containing block above.

See also

• CSS

Favorite site

• All about the containing block - CSS: Cascading Style Sheets | MDN
• Layout and the containing block - CSS: Cascading Style Sheets | MDN