z-indexが効かないときに確認すべき３つの点について

z-indexをつけているのに重なり順が調整されず、試したことと解決方法を記載します。

どのようなときにおこったか

レスポンシブ対応でハンバーガーボタンを作った際、メニューが出現した時にハンバーガーボタンが消えてしまい、メニューを戻せないということがおきました。

そのときのhtmlとCSSは以下の通りとなります。

※関係のない部分は省略して記載しています。

html部分

<header class="header">
<!-- ハンバーガーメニュー-->
<button class="burger">
<span></span>
<span></span>
<span></span>
</button>
<!-- //ハンバーガー -->
</header>
 
<!-- メイン -->
<main>
<!-- メニュー -->
<nav class="nav">

CSS部分

.header {
position: fixed;
z-index: 3; 

 

.burger {
position: relative;
z-index: 4;

 

.nav {
position: absolute;
z-index: 2; 

 

ハンバーガーボタンを作動させ、メニューが出てきたときにjsで.navにつけるCSS

.js-is-open {
      transition: 0.4s;
      transform: translateX(-100%);
      display: block;
      z-index: 3;
    }

 背景色と同化していないか確認する

別のサイトを作った際に「メニューの色とボタンの色を同じにしていたため、メニューが出てきたら同化してしまってボタンが消えたように見えた」ということがあったため今回も真っ先にそれを疑いましたが、今回はきちんと色を変えていたので、その可能性はありませんでした。

 positionがついているか確認する

z-indexプロパティは、ボックスの重なりの順序を指定する際に使用します。 z-indexプロパティは、positionプロパティでstatic以外の値が指定されている要素に適用されます。

引用元：http://www.htmq.com/style/z-index.shtml

とのことだったためpositionの付け漏れがないか確認してみましたが、全部についていました。

 親要素より子要素のz-indexが大きくなっていないか確認する

今回の原因はこれでした。

親要素

.header {
z-index: 3; 

 

子要素（これが一番上に出て欲しいためz-indexを４にしているが、親の影響で実質３）

.burger {
z-index: ４;

メニュー

.nav {
z-index: 2; 

ハンバーガーボタンを作動させ、メニューが出てきたときにjsで.navにつけるCSS

（メニューが出てきた際のz-indexは３なので、headerとburgerとは同じz-index）

.js-is-open {
      z-index: 3;
    }

参考：https://www.netimpact.co.jp/diary/22704/

z-indexが実質すべて同じ値になっていたためボタンが埋もれてしまうということが起こっていたため、値を調整して今回は解決しました。