In this first box, the "Intended Parent" (gray box) does NOT have `relative` positioning. The `absolute` child (red box) is therefore positioned relative to the `body` or the nearest positioned ancestor (which might be the viewport in simple cases), not the gray box as intended.
Notice the red "Absolute Child" is positioned near the top-left of the entire page content area, not its gray "Intended Parent".
Page Content Flow
More Page Content Flow
In this second box, the "Parent Container" (light green box) HAS `relative` positioning. The `absolute` child (dark green box) is now correctly positioned relative to its light green parent. The `z-10` on the "Absolute Child" ensures it's on top of other content within its parent. `z-index` works because the element is positioned (`absolute`).