z-index 表示順序問題に関する詳細報告書

1. 問題の概要：何が起きていたか？

ウェブサイトの主要な視覚要素である「メインビジュアル」（CSSクラス名: .main-visual）が、画面右上に配置されている「ハンバーガーメニュー」（HTMLのID: #hamburger）を覆い隠してしまう問題が発生していました。

                    影響：ハンバーガーメニューは、特にスマートフォンなどの画面が小さいデバイスにおいて、ナビゲーションリンク一覧を表示・非表示するための重要な操作ボタンです。これがメインビジュアルの下に隠れてしまうと、ユーザーはメニューを開けず、サイト内の他のページへ移動することが困難になるなど、ウェブサイトの利便性（ユーザビリティ）を著しく損なう状態でした。
                

2. 問題の原因：なぜ表示順がおかしくなったのか？

この問題の根源は、CSSにおける要素の「重なり順」を決める仕組みであるスタッキングコンテキストと、その中で使われるz-indexプロパティの複雑な関係性にありました。

スタッキングコンテキストとは？
ウェブページ上の要素は、時に重なり合って表示されます。どの要素が手前に、どの要素が奥に表示されるかという「重なり順」は、単純にHTMLに書かれた順番だけでは決まりません。特定のCSSプロパティが指定された要素は、「スタッキングコンテキスト」という特別なグループを形成します。

今回のケースでのスタッキングコンテキストの状況

親となるコンテキスト: ハンバーガーメニューを含む<header>要素と、問題の.main-visual要素は、どちらも<div class="back">という親要素の中にありました。
<header>のコンテキスト: <header>要素には、position: relative;、z-index: 100;、そしてbackdrop-filter: blur(8px);が指定されていました。
ハンバーガーメニューの位置づけ: ハンバーガーメニュー（#hamburger）はposition: fixed;でしたが、その親である<header>にbackdrop-filterが指定されているため、ハンバーガーメニューはSC_Headerのスタッキングコンテキスト内に所属していました。
.main-visualのコンテキスト: .main-visual要素にも、position: relative;、z-index: 1;、そしてbackdrop-filter: blur(5px);が指定されていました。

3. 解決策：どのように修正したか？

この問題を解決するために、.main-visual要素のCSSを以下のように変更しました。

変更前（問題発生時）

CSS

.main-visual {
    position: relative;
    z-index: 1;
    backdrop-filter: blur(5px);
}
                            

変更後（修正版）

CSS

.main-visual {
    position: relative;
    z-index: auto; /* ★変更点 */
    backdrop-filter: blur(5px);
}
                            

                    この修正の効果：

                    z-index: auto;を指定された要素は、親のスタッキングコンテキスト内で、z-indexが明示的に数値で指定された他の要素よりも低い基本的な階層に配置されます。これにより、<header>（z-index: 100）が.main-visual（z-index: auto）よりも確実に前面に表示されるようになりました。

4. 今後の同様の問題への対処方針：再発を防ぐために

CSSの重なり順に関する問題は複雑で、しばしば開発者を悩ませます。今後同様の問題を避けるため、また発生時に迅速に対処できるように、以下の点に留意することをお勧めします。

スタッキングコンテキスト形成条件の理解

positionプロパティがrelativeまたはabsoluteで、かつz-indexがauto以外
positionプロパティがfixedまたはsticky
opacityプロパティが1未満
transform、filter、perspective、clip-path、maskプロパティがnone以外
backdrop-filterプロパティがnone以外

z-indexの計画的な使用

z-indexの値は、むやみに大きな数値（例: 9999）を使うのは避ける
サイト全体である程度のルール（例：グローバルなヘッダーやモーダルウィンドウは1000番台、ドロップダウンメニューは100番台）を設ける

ブラウザの開発者ツールの徹底活用

問題発生時は、まずブラウザの開発者ツール（F12キー）を開き、問題の要素を選択
「Computed」（計算済みスタイル）タブで、実際に適用されている値を確認
「Layers」（レイヤー）パネルで、ページのレイヤー分割を視覚的に確認

HTML構造とCSSのシンプルさの維持

可能な限り、HTMLのネスト構造を浅く保つ
CSSも、セレクタの特定性を過度に上げすぎない
新しいUIコンポーネント追加時には、都度ブラウザで表示を確認