Containing block

The containing block is the rectangle used to resolve percentages and positioned offsets. For absolute positioning it is usually the nearest positioned ancestor; for static flow it comes from the block container.

Transforms, filters, perspective, and contain can make an ancestor the containing block for fixed and absolute descendants — a frequent source of "fixed header not fixed" bugs.

					.panel {
  position: relative;
  height: 400px;
}
.panel__badge {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 25%; /* 25% of .panel padding edge */
}
				

Percentage height only resolves when the containing block has a definite height; otherwise height: 100% collapses to auto behavior.

On interviews: trace which ancestor defines offsets for absolute children and why fixed elements sometimes scroll with a transformed parent.

The trade-off is percentage-based sizing convenience versus the need for definite ancestor dimensions.

Common pitfalls: transformed ancestor captures fixed positioning; percentage heights without definite ancestor height.

Checklist:

• Identify the formatting context and positioned ancestors.
• Watch transforms and containment on ancestors.
• Verify definite sizes for percentage resolution.
• Use logical inset where direction varies.