Absolute Positioning and Containing Block

An absolutely positioned element is removed from normal document flow. Other elements act as if it does not exist. It is positioned relative to its nearest positioned ancestor.

The containing block for an absolutely positioned element is its nearest ancestor with a position value other than static. If none exists, the element is positioned relative to the initial containing block (the viewport).

The most common pattern: add position: relative to a parent to contain absolutely positioned children.

With absolute positioning, top/right/bottom/left are measured from the padding edge of the containing block.

The classic centering technique for absolute elements:

Absolutely positioned elements shrink-wrap to their content by default (unless width/height is set). They no longer stretch to their container's full width like block elements.

Setting all four edges to 0 stretches an absolutely positioned element to fill its containing block:

The inset property is shorthand for top, right, bottom, left together:

Absolutely positioned elements participate in stacking contexts. Use z-index to control which overlapping absolute elements appear on top.

If you forget to add position: relative to the parent, an absolute child will be positioned relative to the nearest already-positioned ancestor — often the viewport. Always check the containing block.

A flex or grid container is not automatically a positioned element. You still need to add position: relative explicitly to make it a containing block for absolute children.

Absolutely positioned elements leave the document flow and are positioned relative to their nearest non-static ancestor. Always add position: relative to the parent to control placement. Use inset: 0 to stretch an absolute element to fill its container.