Example 2: The "Gotcha" - Importance of `relative` on Parent

Demonstrating what happens when the parent is not positioned.

Gotcha: Parent without `relative`

Parent (not `relative`)

Child (absolute)

(Positioned relative to body/viewport)

Child 'escapes' its intended parent visually.

Correct: Parent with `relative`

Parent (`relative`)

Child (absolute)

(Positioned relative to blue parent)

Child is correctly positioned within its parent.

Key Takeaway (Gotcha):

For an `absolute` positioned child to be positioned relative to its direct parent, that parent element must have a positioning context (e.g., `relative`, `absolute`, `fixed`, or `sticky`). If not, the `absolute` child will look for the nearest ancestor that does, or ultimately the `body`/viewport.