CSS Containing Block: The Box That Defines Your Box
An element's size and position are calculated relative to its containing block, not always its direct parent. This determines how percentage widths are resolved and provides the reference for position: absolute.
Why it exists
Browsers need a consistent reference frame to calculate an element's geometry. Without a clear rule for what '100% width' or 'top: 10px' means, layout would be unpredictable. The containing block provides this predictable reference for resolving sizes and positions.
The mental model
Think of the containing block as the 'artboard' for an element. Just as a canvas defines the boundaries for a painting, the containing block defines the coordinate system and boundaries for calculating an element's size and position. This artboard is not always its direct parent element.
How it works
The rules for identifying the containing block depend entirely on the element's position property.
For position: static (the default), relative, or sticky, the containing block is the content box of the nearest block-level ancestor (like a div or p).
For position: absolute, the containing block is the padding box of the nearest ancestor that has a position value other than static (e.g., relative, absolute, fixed).
For position: fixed, the containing block is the viewport itself, which is why these elements stay on screen when you scroll.
A modern wrinkle: For absolute or fixed elements, an ancestor with properties like transform, filter, or perspective will also become the containing block, even if its own position is static.
When to use it
You are always implicitly using the containing block. You consciously manipulate it when you create a position: relative container solely to act as the containing block for a position: absolute child. This allows you to position the child precisely within that container. Setting an element to width: 100% is another example; it fills the width of its containing block.
When not to use it
The concept always applies, but the footgun is misunderstanding which block is the container. If you use position: absolute on an element but forget to set a position on any of its ancestors, its containing block will default to the initial containing block (the viewport). This can cause the element to appear in an unexpected location, seemingly unrelated to its parent.
One canonical example
A common UI pattern is a card component with a 'New' badge in the top-right corner. The card wrapper is given position: relative. This does nothing visually to the card itself, but it establishes a containing block for its children. The badge inside is then given position: absolute, top: 8px, and right: 8px. These offsets are now calculated relative to the card's padding edge, not the viewport or some other distant ancestor.
Interview question
Which CSS property, applied to an ancestor with `position: static`, would establish it as the containing block for a `position: absolute` child?
- a.overflow: hidden
- b.z-index
- c.transformCorrect
- d.position: relative
Why? this is the answer
The card states that for absolute elements, an ancestor with properties like `transform`, `filter`, or `perspective` will become the containing block, even if its own `position` is `static`. While `position: relative` does create a containing block, it requires the ancestor's position to be non-static, which contradicts the question's premise.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles