position：stickyにz-indexが反映されない

前提・実現したいこと

position：stickyを使ってグローバルメニューをページの左側にフロート状態で固定したいと思っています。
ただし、フッター部分にはメニューを重ねたくないため、ページトップからフッターの手前までをsticky containerとして設定すれば実現できるかと考えています。
また、position:stickyを指定したメニューは常に画面の手前に表示された状態にしたいと思っています。

発生している問題・エラーメッセージ

position：stickyを指定しているheader部分を常に手前にフロートするためにz-indexを指定しているのですが、要素の重なりが反映されずにheaderとそれ以降のコンテンツが上下に並んで表示されてしまいます。
headerをコンテンツの手前に重ねるにはどうしたら良いでしょうか。

【実現したいデザイン】（position:fixedで再現しています）

【現在のデザイン】

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<body>
4    <header>
5        <nav>
6            <ul>
7                <li>HOME</li>
8                <li>ABOUT</li>
9                <li>PRODUCTS</li>
10            </ul>
11        </nav>
12    </header>
13/* 以下、コンテンツ省略 */
14</body>
15</html>

css
1header{
2  position: sticky;
3  position: -webkit-sticky;
4  top: 0;
5  z-index: 999;
6}

K_3578

2021/07/01 08:37

こちらでやってみた感じ効いてますけどどっかで上書きしてるとかじゃないですかね

Lhankor_Mhy

2021/07/01 09:55

position: sticky; position: -webkit-sticky; ↑この順番が気になります。

Lhankor_Mhy

2021/07/02 06:21

質問の編集を拝読。もしかして、スクロールさせる前から重ねたい、ということですか？

shigeimon

2021/07/02 06:22 編集

該当部分のみのhtmlおよびcssのソースコードを作成してみましたが、同じ状態になっていました。また、 position: sticky; position: -webkit-sticky; の順番も変えてみましたが変わりませんでした。参考までに質問内容に実現したい状態と現在の状態のgif画像を追加しています。よろしくお願いいたします。

shigeimon

2021/07/02 06:26

>もしかして、スクロールさせる前から重ねたい、ということですか？はい、その通りです。

行動規範の内容に同意します

回答2件

ベストアンサー

以下を追加するとどうですか？

css
1header{
2  height: 0;
3}

投稿2021/07/02 06:29

Lhankor_Mhy

総合スコア37413

shigeimon

2021/07/02 06:31

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

Lhankor_Mhy

2021/07/02 06:33

お役に立てたようで何よりです。ただ、背景とかはなくなっちゃいますね。

shigeimon

2021/07/02 08:06

背景はなくても大丈夫なのですが、heightを0にするとフッター部分にメニューが被ってしまいました。高さがないため、sticky containerから要素がはみ出してしまうようです。 position:stickyをz-indexで指定することはできないようなので、おとなしくfixedとjavascriptで対応しようと思います。アドバイスありがとうございました。

行動規範の内容に同意します

position:stickyとjavascriptを使用して比較的少ないコードで実装できたので実装方法を記載。

headerの高さを0にし、footerの上端が画面に表示されたらheader内のnavが非表示になるようにscriptを実行。

具体的には
1．nav.hideのopacityを0にする。
2．Javascriptで、<footer> の上端が
・ビューポート下端より上ならnavにclass属性「hide」を付加
・ビューポート下端より下ならclass属性「hide」を除去
するように制御

css
1header {
2  position: sticky;
3  position: -webkit-sticky;
4  top: 0;
5  height: 0;
6}
7nav.hide {
8  opacity: 0;
9  transition: opacity .5s ease, visibility .5s ease;
10  pointer-events: none;
11}

javascript
1window.addEventListener( "scroll", evt => {
2	const nav = document.querySelector( "nav" );
3	const footer = document.querySelector( "footer" );
4	const top = footer.getBoundingClientRect().top;
5	nav.classList[ top<window.innerHeight ? "add" : "remove" ]( "hide" );
6	} );