CSS Anchor Positioning完全解説！脱JavaScriptで実現する次世代フローティングUIの全貌

<!-- HTML：DOM階層が離れた構造（切り欠き・重なり順回避のためbody直下に配置） -->
<div class="card-container" style="overflow: hidden;">
  <button id="my-btn" class="btn">店主を呼ぶ🐾</button>
</div>

<!-- ツールチップ要素はbody直下に配置 -->
<div id="my-tooltip" class="tooltip" role="tooltip">
  にゃー！（裏で昼寝中）
</div>

<style>
.tooltip {
  position: fixed; /* または absolute */
  display: none;
  z-index: 1000;
  background: #1e1b18;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  pointer-events: none;
}
</style>

<script>
// JavaScriptで基準要素の座標を取得し、スクロールやリサイズを監視して同期
const button = document.getElementById('my-btn');
const tooltip = document.getElementById('my-tooltip');

function updatePosition() {
  const rect = button.getBoundingClientRect();
  // ボタンの真上中央にツールチップを配置する計算
  const top = rect.top - tooltip.offsetHeight - 8;
  const left = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2);

  tooltip.style.top = `${top}px`;
  tooltip.style.left = `${left}px`;
}

button.addEventListener('mouseenter', () => {
  tooltip.style.display = 'block';
  updatePosition();
  // スクロールやリサイズイベントを購読
  window.addEventListener('scroll', updatePosition, { passive: true });
  window.addEventListener('resize', updatePosition);
});

button.addEventListener('mouseleave', () => {
  tooltip.style.display = 'none';
  window.removeEventListener('scroll', updatePosition);
  window.removeEventListener('resize', updatePosition);
});
</script>

<!-- HTML：DOM階層はどこにあってもOK！ -->
<div class="card-container" style="overflow: hidden;">
  <button class="btn anchor-btn">店主を呼ぶ🐾</button>
</div>

<!-- ツールチップ要素（body直下でも、別コンポーネントでもOK） -->
<div class="tooltip">
  にゃー！（裏で昼寝中）
</div>

<style>
/* ① 基準となるボタンに「アンカー名」をつける */
.anchor-btn {
  anchor-name: --cat-btn;
}

/* ② 浮動要素側でアンカーを指定して配置する */
.tooltip {
  position: fixed;
  position-anchor: --cat-btn; /* 紐付けるアンカー名 */
  
  /* ボタンの真上（top）の中央揃えに配置！ */
  position-area: top span-all;
  margin-bottom: 8px; /* ボタンとの隙間 */

  /* 装飾 */
  background: #1e1b18;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;

  /* ホバー表示の制御（CSSだけで完結） */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ボタンホバー時にツールチップを表示（:has疑似クラス等を活用） */
body:has(.anchor-btn:hover) .tooltip {
  opacity: 1;
}
</style>

.user-avatar {
  anchor-name: --avatar-image; /* 命名 */
}

.status-badge {
  position: absolute; /* または fixed */
  position-anchor: --avatar-image; /* 紐付け */
}

.popover-card {
  position: absolute;
  position-anchor: --target-btn;

  /* ポップオーバーの上端を、ボタンの下端に合わせる */
  top: anchor(bottom);

  /* ポップオーバーの左端を、ボタンの左端に合わせる */
  left: anchor(left);

  /* calc() と組み合わせて余白をつけることも可能 */
  margin-top: 8px;
}

.tooltip-top        { position-area: top; }              /* アンカーの真上・中央揃え */
.tooltip-bottom     { position-area: bottom; }           /* アンカーの真下・中央揃え */
.tooltip-left       { position-area: left; }             /* アンカーの左側・中央揃え */
.tooltip-right      { position-area: right; }            /* アンカーの右側・中央揃え */

.tooltip-top-left   { position-area: top left; }        /* アンカーの真上・左端揃え */
.tooltip-bottom-end { position-area: bottom right; }     /* アンカーの真下・右端揃え */
.tooltip-center     { position-area: center; }           /* アンカーのど真ん中に重ねる */

.dropdown-menu {
  position: fixed;
  position-anchor: --menu-btn;
  position-area: bottom span-all; /* 基本はボタンの下に表示 */

  /* もし画面下に十分なスペースがなければ、自動的に上下（block軸）を反転！ */
  position-try-fallbacks: flip-block;
}

/* カスタムフォールバック①：右側に配置 */
@position-try --place-right {
  position-area: right;
  margin-left: 12px;
}

/* カスタムフォールバック②：上側に配置 */
@position-try --place-top {
  position-area: top;
  margin-bottom: 12px;
}

.smart-popup {
  position: fixed;
  position-anchor: --trigger;
  position-area: bottom; /* 第1候補：下 */

  /* 下に入らなければ右、右にも入らなければ上、と順番に試す！ */
  position-try-fallbacks: --place-right, --place-top;
  
  /* スペースが一番広い方を優先する設定も可能 */
  position-try-order: most-height;
}

.search-input {
  anchor-name: --search-bar;
  width: 100%;
  max-width: 480px;
}

.search-suggestions {
  position: fixed;
  position-anchor: --search-bar;
  position-area: bottom left;

  /* 検索バーの横幅とまったく同じ幅にする！ */
  width: anchor-size(width);

  /* 検索バーより小さくならないよう最小幅を設定 */
  min-width: anchor-size(width);
  max-height: 300px;
  overflow-y: auto;
}

<!-- HTML：popovertarget 属性で開閉を宣言 -->
<button popovertarget="user-menu" class="user-btn">
  🐱 猫店主メニュー ▼
</button>

<!-- popover 属性を付与したメニュー本体 -->
<nav id="user-menu" popover class="user-dropdown">
  <ul>
    <li><a href="#profile">店主プロフィール</a></li>
    <li><a href="#settings">チュール支給設定</a></li>
    <li><a href="#logout">ログアウト</a></li>
  </ul>
</nav>

<style>
/* ボタンをアンカーとして登録 */
.user-btn {
  anchor-name: --user-btn;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 6px;
  background: #c93a40;
  color: #fff;
  border: none;
}

/* ポップオーバー側の設定 */
.user-dropdown {
  /* Popover APIのデフォルトスタイルをリセット */
  margin: 0;
  padding: 8px 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

  /* Anchor Positioningでボタンの真下に配置 */
  position-anchor: --user-btn;
  position-area: bottom left;
  margin-top: 6px;

  /* はみ出し時の自動反転 */
  position-try-fallbacks: flip-block;
}

/* ポップオーバー内部のリスト装飾 */
.user-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 180px;
}
.user-dropdown a {
  display: block;
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
}
.user-dropdown a:hover {
  background: #fdf5f5;
  color: #c93a40;
}
</style>

<script type="module">
// ブラウザがネイティブのAnchor Positioningをサポートしていない場合のみPolyfillをロード
if (!('anchorName' in document.documentElement.style)) {
  import('https://unpkg.com/@oddbird/css-anchor-positioning/dist/css-anchor-positioning-fn.js');
}
</script>