Understanding 'relative' Parent for 'absolute' Children & Z-Index

Gotcha: Missing 'relative' on Parent

The orange badge uses absolute . Its direct blue parent (below) LACKS the relative class. Consequently, the badge positions itself relative to the nearest ANCESTOR that IS positioned. In this example, the outer gray dashed box has relative , so the badge aligns to it.

Intended Parent
(No 'relative')
Badge (relative to dashed box)

Observation: The orange badge is at the top-left of the dashed gray border, not its direct blue parent. This is the "Gotcha".

Correct: 'relative' on Parent

The teal badge uses absolute . Its direct green parent (below) HAS the relative class. This makes the green parent the positioning context for the badge.

Parent
(Has 'relative')
Badge (relative to green box)

Observation: The teal badge is correctly positioned at the top-left of its green parent box.

Z-Index and Positioned Elements

The z-index utility (e.g., z-10 , z-20 ) controls the stacking order of positioned elements. Higher values are stacked on top of lower values. Crucially, z-index only works on elements that have a position value of relative , absolute , fixed , or sticky . It has no effect on statically positioned elements (the default).

Item A (z-10)
Item B (z-20)

Item B ( z-20 ) is on top of Item A ( z-10 ) because it has a higher z-index and both are positioned ( absolute ).