タグアーカイブ WordPress

スクロール要素で消えるドロップダウンを解決する——CSSとJSによる決定版ガイド

WordPressの管理画面や複雑なデータテーブルを構築している際、ドロップダウンメニューが枠外で切れて見えなくなる現象に遭遇したことはないだろうか。スクロール可能な要素の中にメニューを配置すると、本来最前面に表示されるべき要素がコンテナの縁で無残にカットされてしまう。この問題は、CSSの仕様が複雑に絡み合うことで発生する。

元記事の著者であるGodstime Aburu氏は、このバグを「overflowのクリッピング」「スタック文脈（Stacking Context）」「包含ブロック（Containing Block）」という3つのブラウザシステムの衝突であると分析している。これら3つの仕組みを個別に理解していても、それらが重なったときに何が起きるかを把握している開発者は意外に少ない。

本記事では、なぜドロップダウンが壊れるのかという技術的背景を整理し、ポータル（Portal）や最新のCSS Anchor Positioningを用いた解決策を詳しく解説する。これを理解すれば、z-indexの数値を闇雲に上げるだけの「終わらない戦い」から解放されるはずだ。

なぜスクロール要素内でドロップダウンは「壊れる」のか

ドロップダウンが消えたり、意図しない位置に表示されたりする原因は、主に3つのブラウザシステムが干渉し合っているためだ。著者のAburu氏は、これらが衝突することで予測不能な挙動が生まれると指摘している。

overflowプロパティによるクリッピングの罠

最も一般的な原因は、親要素に設定された overflow: hidden や overflow: auto だ。これらが設定されると、ブラウザはコンテナの境界線からはみ出した子要素を強制的に切り取る。たとえ子要素に position: absolute を指定していても、このクリッピングから逃れることはできない。

.scroll-container {
  overflow: auto;
  height: 200px;
}

.dropdown-menu {
  position: absolute;
  /* 親のoverflowによって、枠外に出ると見えなくなる */
}

上記のデモでは、黒いドロップダウンメニューが白いコンテナの底に達した時点で切り取られていることがわかる。これは視覚的な問題だけでなく、アクセシビリティ上の問題も引き起こす。スクリーンリーダーの利用者はメニュー項目をフォーカスできるが、晴眼者にはそれが見えないという乖離が発生するためだ。

「スタック文脈」が引き起こす表示順の混乱

次に厄介なのが「スタック文脈（Stacking Context）」だ。これは要素の重なり順を管理する「密閉されたレイヤー」のようなものだ。特定のプロパティ（ opacity が1未満、 transform 、 filter など）が適用されると、その要素は新しいスタック文脈を生成する。

一度スタック文脈の中に閉じ込められると、その中の子要素に z-index: 9999 を指定しても、文脈の外にある要素の上に表示させることはできない。z-indexの比較は、同じスタック文脈内の兄弟要素間でのみ行われるからだ。これが「z-indexをいくら上げても効かない」という現象の正体である。

包含ブロックと座標計算のズレ

3つ目の要因は「包含ブロック（Containing Block）」だ。 position: absolute を指定した要素は、直近の「位置指定された（positionがstatic以外）」先祖要素を基準に配置される。しかし、スクロールコンテナが深い位置にある場合、ドロップダウンの座標計算はコンテナ基準になってしまう。コンテナがスクロールしてもドロップダウンの座標が更新されないため、トリガーボタンだけが移動し、メニューがその場に取り残されるという現象が起きる。

根本的な解決策1：ポータル（Portal）パターンの活用

著者のAburu氏が最終的に最も信頼できる解決策として挙げているのが「ポータル」だ。これはドロップダウンのDOM要素を、本来の階層構造から切り離し、 document.body の直下にレンダリングする手法である。

DOMの最上位に配置することで、親要素の overflow: hidden や特定のスタック文脈による制限を完全に回避できる。ReactやVueといったモダンなフレームワークには、この「ポータル」を実現するための機能が標準で備わっている。

// Reactでのポータル実装例
import { createPortal } from 'react-dom';

function Dropdown({ isOpen, anchorRef, children }) {
  if (!isOpen) return null;

  // document.bodyの直下にレンダリングする
  return createPortal(
    <div className="dropdown-menu" style={{
      position: 'absolute',
      top: anchorRef.current.getBoundingClientRect().bottom + window.scrollY,
      left: anchorRef.current.getBoundingClientRect().left + window.scrollX
    }}>
      {children}
    </div>,
    document.body
  );
}

バニラJavaScriptであっても document.body.appendChild() を使えば同様のことが可能だ。ただし、ポータルを使用する場合は、テーマのコンテキスト（CSS変数など）が引き継がれないことや、キーボード操作のフォーカス管理を自分で行う必要がある点に注意が必要だ。メニューを閉じた際に元のボタンにフォーカスを戻すといった処理を忘れると、アクセシビリティを損なう原因になる。

根本的な解決策2：CSSの最新機能を使いこなす

JavaScriptによる座標計算に頼らず、ブラウザのネイティブ機能で解決する方法も普及し始めている。特に「CSS Anchor Positioning」と「Popover API」の組み合わせは、次世代の標準となる可能性が高い。

CSS Anchor Positioningの可能性

CSS Anchor Positioningは、特定の要素（アンカー）を基準に別の要素を配置できる機能だ。これを使えば、ドロップダウンが画面端で切れないように自動で位置を反転させる（フリップ）処理もCSSだけで記述できる。

.trigger {
  anchor-name: --menu-anchor;
}

.dropdown-menu {
  position: absolute;
  position-anchor: --menu-anchor;
  top: anchor(bottom);
  left: anchor(left);
  /* 画面端で切れる場合に自動で反転 */
  position-try-fallbacks: flip-block;
}

※このデモはCSSの概念を視覚化したイメージです。実際の動作はChrome DevToolsで確認してください。現在、Chromium系ブラウザでは強力なサポートがあるが、Firefoxなどではポリフィルが必要になる場合があるため、導入にはターゲットブラウザの確認が欠かせない。

Popover APIによるレイヤー管理の簡略化

もう一つの注目機能が「Popover API」だ。 popover 属性を持つ要素は、ブラウザの「トップレイヤー（Top Layer）」と呼ばれる特殊な層にレンダリングされる。この層は、どんなz-indexよりも上に表示され、 overflow: hidden の影響も受けない。

<button popovertarget="my-menu">メニューを開く</button>
<div id="my-menu" popover="manual" role="menu">
  メニューの内容
</div>

Popover APIは「重なり順」の問題を解決するが、配置（座標計算）の問題は解決しない。そのため、配置には前述のAnchor PositioningやJavaScriptを組み合わせて使用するのが一般的だ。この2つを組み合わせることで、ライブラリに頼らずとも堅牢なUIを構築できるようになる。

実務での分析：WordPressサイトでの適用

WordPressの運用において、このドロップダウン問題は特に出現しやすい。例えば、管理画面（ダッシュボード）のカスタマイズや、Gutenbergブロック内での設定パネルの実装などが挙げられる。WordPressの管理画面は多くのネストされた要素と overflow: auto を多用しているため、独自の実装が簡単にクリップされてしまうのだ。

独自の分析として、既存のWordPressサイトでこの問題を手軽に修正したい場合は、以下の優先順位で検討することをお勧めする。

• DOM構造の変更: 可能であれば、ドロップダウンをスクロールコンテナの外に配置し直す。これが最も副作用が少なく、パフォーマンスも良い。
• CSSによる微調整: 親要素の overflow を一時的に visible に変更できるか検討する。ただし、スクロール機能が失われるリスクがある。
• ライブラリの活用: 自前で座標計算を実装するのは難易度が高いため、Floating UIなどの定評あるライブラリを導入し、ポータル機能を利用するのが現実的だ。

特に、パフォーマンスを重視するWordPressサイトでは、不要なJavaScriptを減らすために最新のCSS機能を段階的に導入する（プログレッシブ・エンハンスメント）姿勢が重要になるだろう。

状況別・最適な解決策の選び方

どの手法を選ぶべきかは、プロジェクトの要件やサポートブラウザによって異なる。著者のAburu氏が提示したガイドラインを元に、選択の基準を整理した。

• ネストが深く、親要素を制御できない場合: ポータル（Portal）一択だ。DOMを移動させることで、すべての干渉を断ち切ることができる。
• モダンブラウザのみを対象とする場合: CSS Anchor PositioningとPopover APIの組み合わせがベストだ。CSSで簡潔に記述でき、メンテナンス性が高い。
• 軽量な実装を求める場合: position: fixed を活用する。ただし、先祖要素に transform などが設定されていないことを確認する必要がある。
• 複雑なロジックを避けたい場合: DOM構造を見直し、最初からスクロールコンテナの外にメニューを配置するよう設計を変更する。

どのような手法を採るにせよ、最終的には「ユーザーが正しく操作できるか」が重要だ。視覚的な修正に満足せず、キーボード操作やスクリーンリーダーでの挙動を必ずテストしてほしい。

この記事のポイント

• ドロップダウンが欠ける原因は、overflow、スタック文脈、包含ブロックの3要素の衝突にある
• ポータルパターンは、DOMを最上位に移動させることでクリッピングを回避する最も確実な手法だ
• CSS Anchor PositioningとPopover APIは、ネイティブで重なりと配置を解決する次世代の標準である
• z-indexを増やすだけでは解決しないため、どの先祖要素がスタック文脈を作っているか特定することが重要だ
• アクセシビリティ（フォーカス管理やARIA属性）は、実装の「仕上げ」ではなく「必須要件」として扱うべきである

出典

• Smashing Magazine WordPress「Dropdowns Inside Scrollable Containers: Why They Break And How To Fix Them Properly」（2026年3月20日）

海田 洋祐

・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験

www.aandgweb.co.jp