ハンバーガーメニューが画像の上の時だけ開かないです css html

Question

作ったサイト

↑のサイトを作ったのですが、スマホ時のハンバーガーメニューの挙動がおかしくて困っています。
ハンバーガーメニューがaboutの画像（about-img） とlocationの画像（location-img）の上にきたときだけ、動作しなくなります。ほかの場所では正常に動いてくれます。

なぜですか？

ヘッダーやMENUの画像の上では正常に動いたので、なにか違いがあるのかと思ったのですが、font-sizeの指定の違いくらいしかわかりませんでした。

どなたか　よろしくお願いします。

Answer 1

解決策はangel-sunさん、hatena19さんの回答で問題ありませんが、実態は少し違います。
※これは今後このページにたどり着いた人のために書いています。ベストアンサーは別の方で良いです。

<div id="nav-drawer"/>より上にある要素は以下の要素です。

• <h2>LOCATION</h2>
• <h2>ABOUT</h2>

以下の要素は<div id="nav-drawer"/>よりも下にあります。

• <div class="about-img"/>
• <div class="location-img"/>

これを解決するには確かに#nav-drawerに大きなz-indexを指定すれば問題ありません。

ではなぜ<h2>MENU</h2>等ではこの問題が発生していないのかですが、スタックコンテキスト(Stacking Context)という概念が原因です。

z-indexを指定することでスタックレベルが指定されますが、今回は指定されていなかったので重なりはスタックコンテキストもしくはHTML構造の順番によって設定されます。

#nav-drawerにはスタックコンテキストを生じさせるposition:fixedが指定されているため、特にそれらが指定されていない<h2>MENU</h2>等よりは上の要素になります。

<h2>LOCATION</h2>等にはスタックコンテキストを生じさせるfilter: drop-shadow()が指定されています。<h2>LOCATION</h2>はHTML構造の順番が#nav-drawerより後のため、#nav-drawerよりも上層に重なります。

そのため、LOCATION等の上ではクリックできずMENU等の上ではクリックできるという現象が発生しています。

Comments

[angel-sun]

ベストアンサーはこちらです。

[hatena19]

なるほど。そういうことですか。
回答ははしまたが、filter: drop-shadow() の有無で重なりが変わるのか調べたけどわかりませんでした。
k4aさんの回答で納得できました。

[y-sasaki]

皆さん　回答ありがとうございました。

Answer 2

デベロッパーツールで確認してみました。

.about-img h2にfilterを設定しているが原因のようですね。
これをデベロッパーツールでオフにするとハンバーガーメニューをクリックできるようになりました。

ただ、このfilterは残しておきたいですよね。そこで.about-img h2にpointer-events: none;を追加してクリックを無効にしてみました。
これでハンバーガーメニューがクリックできるようになりました。

Answer 3

こんばんは、天使です。

ハンバーガーメニューのある

<div id="nav-drawer"/>

が重なりとして、
aboutの画像（about-img）とlocationの画像（location-img）

<div class="about-img"/>
<div class="location-img"/>

の領域の下に位置する為、

クリック等のイベントが、重なりとして上にある

<div class="about-img"/><div class="location-img"/> で止まってしまっています。

これは、background-imageを指定しているためにハンバーガーメニューの方が上にあるように見えているだけで、実際には<div class="about-img"/><div class="location-img"/>の方が上である為です。

解決策としては、ハンバーガーメニューのz-indexを<div class="about-img"/><div class="location-img"/>のz-indexよりも大きく設定すればよく、

#nav-drawer {
    position: fixed;
    right: 0;
    z-index: 10;
}

で良いでしょう。