Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。
フォーム Limited support

Anchor positioning

CSS Anchor Positioning は anchor-name と position-anchor を使い、ある要素を別のアンカー要素に相対的に配置します。ツールチップやポップオーバーに有用です。

フォーム

概要

CSS Anchor Positioning は anchor-name と position-anchor を使い、ある要素を別のアンカー要素に相対的に配置します。ツールチップやポップオーバーに有用です。

対応ブラウザ

デスクトップ

Chrome 未対応
Edge 未対応
Safari 未対応
Firefox 未対応

基本構文

HTML 
<style>
.anchor { anchor-name: --btn; }
.tooltip {
  position: fixed;
  position-anchor: --btn;
  top: anchor(bottom);
  left: anchor(center);
}
</style>
<button class="anchor">ホバー</button>
<div class="tooltip" popover>説明テキスト</div>

実務での使いどころ

  • Anchor positioning の活用

    CSSアンカーポジショニング。要素を別の要素に対して相対的に配置するCSS機能。

注意点

  • 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク