Bell Icon with Badge
Cart Icon with Badge
Inspect the HTML to see comments explaining the `relative`, `absolute`, and `transform` utilities used for precise badge placement. The fiddly nature often comes from fine-tuning `translate-*` values or `top/right/bottom/left` offsets.
If an
absolute
positioned badge does not have an ancestor with
position: relative
(or other non-static position), it will be positioned relative to the initial containing block (usually the
<body>
).
Imagine an icon here.
Badge (where would I be?)(This is a conceptual illustration of the gotcha)