Consider this nesting, where .outer has position: relative, .middle has position: static (the default), and .inner has position: absolute with top: 0 and left: 0. No ancestor uses transform, filter, or CSS containment. <div class='outer'><div class='middle'><div class='inner'></div></div></div> Which box does .inner position itself against?

Explanation

An absolutely positioned box is laid out against the nearest ancestor that is positioned — that is, whose position is anything other than static. .middle is static, so it is skipped entirely despite being the parent, and .outer, being relative, provides the containing block. The edges used are the padding edges, not the content edges, so .inner's top: 0 / left: 0 lands at the inside corner of .outer's padding, ignoring .outer's own padding values. If no positioned ancestor existed at all, the containing block would be the initial containing block (viewport-sized), not simply 'the viewport' as a live reference frame — which is what position: fixed uses.