トリガー要素に追従するモーダルダイアログ

ダイアログにアンカーが必要なとき

ほとんどのモーダルダイアログはビューポート中央に配置されますが、確認プロンプト・クイック編集フォーム・「本当にいいですか？」パネルなど一部は、操作対象の要素のすぐ横に表示する方が自然です。アンカーポジショニングはネイティブの <dialog> 要素でこれを実現します。

<button class="delete-btn" id="delete-1">削除</button>
<dialog class="confirm-dialog" id="confirm-1">
  <p>このアイテムを削除しますか？</p>
  <menu>
    <button autofocus value="cancel">キャンセル</button>
    <button value="confirm">確認</button>
  </menu>
</dialog>

#delete-1 {
  anchor-name: --delete-1;
}

#confirm-1 {
  position: absolute;
  position-anchor: --delete-1;
  position-area: bottom-end;
  margin-top: 8px;

  /* デフォルトの中央揃えをリセット */
  inset: auto;
  margin: 0;

  position-try-fallbacks: flip-block, flip-block flip-inline;
}

<dialog> のクセ

ネイティブの <dialog> は .showModal() で開くと自動的に中央揃えされます。アンカー配置に切り替えるには：

1. inset: auto と margin: 0 を指定して、デフォルトの inset: 0; margin: auto 中央揃えをクリアします。
2. .show()（モードレス）または .showModal()（モーダル）でダイアログを開きます。どちらもアンカーポジショニングと併用可能です。

モーダル vs モードレス

.showModal() はバックドロップを追加してフォーカスをトラップします。.show() はどちらもしません。「クイック編集」アンカードダイアログには通常 .show() が適切です — ユーザーが作業を続けるためにバックドロップを閉じる必要はないはずです。「削除しますか？」のような破壊的確認には .showModal() で適切な摩擦を加えます。

グローバルダイアログには使わない

中央揃えのモーダルダイアログ（アカウント設定、フルページウィザード）はアンカーポジショニング不要です。このパターンは小さなインライン確認・編集にとっておきましょう。