固定ナビがコンテンツの下になる

質問

自作ページを作成しており、ヘッダー部分で固定される固定ナビを設置しようとしています。試しに設置したのですが、スクロール時にページ内の画像などのコンテンツが固定ナビの下を通過せず上を通過してしまいます。
何か問題解決の手段はないでしょうか。

・「position: relative」が原因と思われ、ナビの上を通過するコンテンツには大方これが使われています。（「position: relative」を消さないやり方をお願いします。）
・固定ナビには「Sticky Header CSS Transition（https://codepen.io/soulrider911/pen/dGuEn）」を使っています。
・ナビの上を通過するのは、吹き出し（https://saruwakakun.com/html-css/reference/speech-bubble）を設定したものと、「shuffle.js」で作った画像の一覧、さらにキャプションエフェクト（https://www.nxworld.net/tips/css-only-caption-effect.html）です

回答No.1

4017B · ベストアンサー

実際にCSSを適用運用している現物のwebページ(HTML)を見ないと確定的な事は言えないけど。恐らくは z-index が間違ってるか、或いはちゃんと具体的数値を指定していないからじゃないのかな？

body > header {
z-index: 1;
}
body > .wrapper {
z-index: 0;
}

～みたいなCSS指定記述を追記すれば、他に競合する部分が無ければ目的の「ナビメニューが常に最上位に表示され、メインコンテンツ部分はその下を潜る様に」なるかと思います。

あ、無論これは提示されている参考リンク https://codepen.io/soulrider911/pen/dGuEn と全く同じHTML構成になっている～という前提に基づいていますので。自前の変なクラス名とか、そのそもwebページのHTML構成がリンク先の記述例と異なっている場合は功を奏しませんのであしからず…。

P.S.
"z-index" に指定する数値は0以上の正の整数ならなんでも良く。また数値が大きい順に上に被さって表示される様になります。大まかにコンテンツ全体を囲う親要素の<div>などに指定する事で、その中に内包される全ての子要素に影響を与える事が出来ます。

記述例で言えば、数値の大きさが header ＞ wrapper になっていれば何でもOKです。

また子要素同士の重ね順番も同じ様にして細かく指定する事が出来ます。何もCSS等で設定しない場合、初期設定の数値は "z-index:0;" になっています。

お礼

ご返答いただきありがとうございます！ぱっと出来てしまったのでとても驚いています！！
同時に、自身の知識不足を実感しました・・・

ありがとうございました！！！！