z-indexが効かない

Question

https://excelsior-fitness.jp/contact/

スマホで表示したとき、
ハンバーガーメニューが
HOMEしか表示されず、
globalMenuSp activeのz-indexの数値をいくら上げてもメニューが表示されません。

ハンバーガーメニューを表示するには、
どうすればよいか、お分かりになられる方ご教授頂けると幸いです。

どうぞよろしくお願い致します。

⇓ 　　　⇓　　　⇓

2番目「2. 要素にpositionが設定されていない」とアドバイス頂き、
globalMenuSp activeにposition: relative;を追加すると、
下記のようになってしまいました。

Comments

[m.ts10806]

URLだけ提示されても広告効果を狙っていると思われるので、
実装を提示してください。

[m.ts10806]

「実装」とは、現在のコードのことです。
全体のコード提示されないと一部だけ対応しても整合性とれず
問題の解決にはなりにくいです。

Answer 1

z-indexが思うようにいかない場合は、下記を参考にするとたいてい解決します。

CSSでz-indexが効かない時の4つの原因とその対応方法 | コリス

今回は上記の2番目「2. 要素にpositionが設定されていない」に該当すると思われます。

Comments

[code_mate]

ご回答ありがとうございます。

globalMenuSp activeにposition: relative;を追加すると、
レイアウトが大幅に崩れてしましました。

[hatena19]

header に追加してください。

[code_mate]

無事上手くできました。
この度は、アドバイスを頂き、大変感謝致します。
どうもありがとうございました。