CodePark/ questions / Display, positioning & stacking
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Display, positioning & stacking

.inner is inside .middle, which is inside .outer. Relative to which box is .inner positioned?

.outer  { position: relative; padding: 20px; }
.middle { margin: 40px; }
.inner  { position: absolute; top: 0; left: 0; }
The padding box of .outer

The padding box of .outer is right. An absolutely positioned element is placed against its containing block. That is the padding box of the nearest ancestor whose position is not static. The padding box is the area inside the border, padding included.

.middle is the tempting wrong answer. It is the direct parent, but it is static, so the browser skips it. The content box of .outer is also wrong. top: 0; left: 0 lands at the inner edge of .outer's border, not inside its padding.