Skip to content
FrontendHaltFrontendHalt
CSS·Intermediate·Coding·1 min read

What creates a containing block?

Short interview answer

The containing block depends on positioning and ancestor properties. Static and relative elements usually use a content box from their formatting context; absolute and fixed positioning follow specific ancestor rules, and transforms can establish containing blocks.

Example

CSS
.card { position: relative; }        /* becomes the containing block */.card .badge { position: absolute; top: 0; right: 0; }
/* transform also makes an ancestor the containing block for fixed children */.parent { transform: translateZ(0); }

Key takeaway

Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.

← Back to CSS layout

Related questions