アバターに追従する通知バッジ

旧来のアプローチ

アンカーポジショニング以前は、アバターを position: relative のコンテナでラップして、絶対配置のバッジを角に置く必要がありました：

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

これは動きますが、マークアップが汚れます。アンカーポジショニングならラッパーをスキップできます：

<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%); /* 角に微調整 */

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

角の微調整

position-area: top-end でバッジの左下角がアバターの右上角に合います。transform: translate(40%, -40%) はバッジの幅の40%右、高さの40%上に微移動します — これでバッジがアバターの角にまたがる形になります。お好みで調整：

• translate(50%, -50%) — 角に正確に中央
• translate(30%, -30%) — アバター内側寄り
• translate(80%, -80%) — アバター外側寄り（「ぶら下がる」バッジ風）

なぜ flip フォールバックを使わない？

アバターバッジは反転すべきではありません — アバターの上にあるバッジが時々下にあるのは視覚的に一貫性を欠きます。ここでは position-try-fallbacks をスキップしてください。祖先の overflow をクリップしてもバッジは角に留まりますが、ほとんどのレイアウトではアバターラッパーに余裕があるため問題ありません。

複数のバッジ

プレゼンスインジケーター（オンラインドット）と通知カウント（未読数）を両方表示する場合、それぞれ異なる position-area を割り当てます：ドットには bottom-end、カウントには top-end。両方とも同じアンカーをターゲットにできます。