Badge Positioning on an Element
This example demonstrates how to position a badge on top of another element, like an icon, and addresses the common "Gotcha" related to `relative` and `absolute` positioning.
Notification Bell Example
Gotcha Addressed:
-
The icon/button container (parent)
MUST have `relative` positioning.
-
The badge itself
MUST have `absolute` positioning.
-
Precise placement often requires utility classes like `top-0`, `right-0`, and `transform` (e.g., `translate-x-1/2`, `-translate-y-1/2`) to nudge the badge into the perfect spot. Alternatively, small negative margins or top/right/bottom/left values (like `-top-2 -right-2`) can be used.
-
Without `relative` on the parent, the `absolute` badge would be positioned relative to the `
` or another positioned ancestor, not the element you intend it to be on.