Laying Things Out (Positioning & Structure)
Place one item on top of another (overlapping).
Skill ID: LayingThingsOut_9
Description: Layer elements, like putting a "New!" badge on the corner of a product image.
Where to apply: Notification badges, text captions over images, dropdown menus.
Key Tailwind Classes:
relative
(on parent)
,
absolute
(on child)
,
z-10
Gotcha:
Forgetting to put
relative
on the intended parent container. If you don't, the
absolute
positioned child will be positioned relative to the whole page or the nearest "positioned" ancestor, which might not be what you want.
z-index
only works on positioned elements (
relative
,
absolute
,
fixed
,
sticky
).