Notification Badge Anchored to an Avatar

The Old Approach

Before anchor positioning, you'd wrap the avatar in a position: relative container so an absolutely-positioned badge could sit on the corner:

<div style="position: relative; display: inline-block;">
  <img src="avatar.png" />
  <span style="position: absolute; top: -4px; right: -4px;">3</span>
</div>

This works but pollutes the markup. Anchor positioning lets you skip the wrapper:

<img class="avatar" id="avatar-1" src="avatar.png" />
<span class="badge" id="badge-1">3</span>

.avatar {
  anchor-name: --av-1;
}

.badge {
  position: absolute;
  position-anchor: --av-1;
  position-area: top-end;
  transform: translate(40%, -40%); /* nudge into the corner */

  background: var(--error);
  color: white;
  border-radius: 999px;
  padding: 0 6px;
  font-size: 11px;
  line-height: 18px;
  min-width: 18px;
  text-align: center;
}

Fine-tuning corner placement

position-area: top-end puts the badge's bottom-left corner at the avatar's top-right corner. The transform: translate(40%, -40%) then nudges 40% of the badge's own width to the right and 40% of its height up — so the badge straddles the avatar's corner instead of sitting flush outside it. Tweak these percentages to taste:

• translate(50%, -50%) — exactly centered on the corner
• translate(30%, -30%) — mostly inside the avatar
• translate(80%, -80%) — mostly outside (more like a "hanging" badge)

Why no flip fallbacks?

Avatar badges should never flip — a badge above an avatar but below it sometimes would be visually inconsistent. Skip position-try-fallbacks here. The badge stays in the corner even if it would clip an ancestor's overflow; in most layouts that's fine because the avatar wrapper has enough breathing room.

Multiple badges

If you have a presence indicator (online dot) AND a count badge (unread), give them different position-area values: bottom-end for the dot, top-end for the count. Both can target the same anchor.