こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

CSSのプロパティのひとつ「z-index」。
このプロパティは要素同士の重なり順を指定する場合に使用します。
基本的に数値の大きい値を指定した方が上に配置されますが、中には数値通りの重なり順にならないという事も。
今回の記事ではz-indexを指定しているのに思い通りの重なり順にならない場合の原因と解決方法をご紹介したいと思います。

z-indexが効かない時の原因と解決方法

z-indexを指定しているのに効かない原因はいくつかあります。

数値が正しくない

まずはじめにご紹介する原因が、「数値が正しくない」です。
元も子もないですが、数値は半角数字で入力していますか？
また余分な余白や文字列は入っていないですか？
さらに、指定できる数値は整数のみで-2147483647～2147483647までとなっています。

以下のような場合、重なり順を正しくコントロールすることは出来ません。

<div class="box a">要素A</div>
<div class="box b">要素B</div>

.box{
    width: 100px;
    height: 100px;
    border: 1px solid;
    position: absolute;
}
.a{
    background: #dc5a45;
    left: 50px;
    z-index: ９９９９;
}
.b{
    background: #e8c72e;
    top: 50px;
    z-index: 1;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

上の例の場合、class="top"の数値が全角になっています。この全角を半角に直すことで重なり順を正しくコントロールすることが出来ます。

.box{
    width: 100px;
    height: 100px;
    border: 1px solid;
    position: absolute;
}
.a{
    background: #dc5a45;
    left: 50px;
    z-index: 9999;
}
.b{
    background: #e8c72e;
    top: 50px;
    z-index: 1;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

また、数値の桁数や値が間違ってしまっているという事も考えられます。
よく見たら、上にしたい要素の方がz-indexの数値が小さかったという事も考えられます。
まずは一度、指定した数値を見直し、見比べてみましょう。

positionプロパティを指定していない

z-indexを指定する場合、positionプロパティも指定する必要があります。
このpositionプロパティが初期値だとstaticになっていますが、static以外の値を指定する必要があります。

<div class="box a">要素A</div>
<div class="box b">要素B</div>

.box{
    width: 100px;
    height: 100px;
    border: 1px solid;
}
.a{
    background: #dc5a45;
    left: 50px;
    z-index: 9999;
}
.b{
    background: #e8c72e;
    top: 50px;
    z-index: 1;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

上の例の場合、positionプロパティが指定されてません。positionプロパティを指定（static以外）することでz-indexが効かない原因を解消出来ます。

<div class="box a">要素A</div>
<div class="box b">要素B</div>

.box{
    width: 100px;
    height: 100px;
    border: 1px solid;
    position: absolute;
}
.a{
    background: #dc5a45;
    left: 50px;
    z-index: 9999;
}
.b{
    background: #e8c72e;
    top: 50px;
    z-index: 1；
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

意外と忘れてしまう、他の部分で既に指定していると思い込んでいる等、
この原因の場合は解消は容易ですね。

親要素のz-indexが影響している

続いてご紹介するのが親要素のz-indexが影響しているという場合です。
こ場合、先ほどご紹介した場合と異なり、一見正しく指定出来ているように思えるため、すぐに原因を見つけることが難しいかもしれません。また、HMTLの構造や配置によっては修正は大掛かりになったり、場合によっては修正出来ないということも考えられます。

具体的な例で説明すると

• 要素上・・・・z-index: 200;
• 要素下・・・・z-index: 100;

このように指定したとします。通常であれば、要素上が要素下よりも上に配置されます。

<div class="box a">要素A</div>
<div class="box b">要素B</div>

.box{
    width: 100px;
    height: 100px;
    border: 1px solid;
    position: absolute;
}
.a{
    background: #dc5a45;
    left: 50px;
    z-index: 200;
}
.b{
    background: #e8c72e;
    top: 50px;
    z-index: 100;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

しかし、これが以下のような状況だった場合、

• 要素A・・・・z-index: 200;
• 要素B・・・・z-index: 100;
• 要素Aの親要素C・・・z-index：50;

この場合、要素Bにいくら大きな数値を指定したとしても要素Aより上に配置されることはありません。

<div class="c">
    <div class="box a">要素A</div>
</div>
<div class="box b">要素B</div>

.box{
    width: 100px;
    height: 100px;
    border: 1px solid;
    position: absolute;
}
.a{
    background: #dc5a45;
    left: 50px;
    z-index: 200;
}
.b{
    background: #e8c72e;
    top: 50px;
    z-index: 100;
}
.c{
    z-index: 50;
    position: relative;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

この場合、親要素Cの数値をz-index:200;よりも大きくする必要があります。

<div class="c">
    <div class="box a">要素A</div>
</div>
<div class="box b">要素B</div>

.box{
    width: 100px;
    height: 100px;
    border: 1px solid;
    position: absolute;
}
.a{
    background: #dc5a45;
    left: 50px;
    z-index: 200;
}
.b{
    background: #e8c72e;
    top: 50px;
    z-index: 100;
}
.c{
    z-index: 300;
    position: relative;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

上の例では、このように親要素の数値を高く再設定するだけで解決しましたが、親要素の数値を変更することで他の部分の重なり順が狂ってしまったり、要素が消えてしまったり等、
親要素の数値を変更することで広がる他への影響が思いのほか大きくなってしまうという事も珍しくありません。
このような場合は、地道にそれぞれの数値を変更して希望の重なり順になるように調整したり、思い切ってHTMLの構造を変えてしまうのもひとつの手ですね。

z-indexを指定する場合のコツ

z-indexを指定するうえでマイルールというものを設けています。
最後にそんなマイルールをご紹介します。

重なり順を指定する際、最上値は9999として、上にしたい要素にはz-index: 6000;を、下にしたい要素にはz-index: 4000;を指定します。
そして、HTML構造上、あまりにも遠い位置にコーディングしてあるタグ同士では重なり順は指定しないようにします。
これをしてしまうとz-indexの関係をHTML全体で考えないといけなくなってしまうからです。
最後のルールとして、期間限定で告知したいポップアップやグローバルナビなどに対してはz-indexの値を9900番台を指定します。
これで基本的にはそれらの要素が最上部に表示させることが出来ます。
そして、最上値である9999は使用しないようにします。

基本的にこのルールを適用することで重なり順に関する不都合は生じなくなりました。

まとめ

いかがでしたか？
z-indexを指定しているのに思い通りの重なり順にならない原因は見つかりましたか？
恐らく原因はちょっとしたことがほとんどだと思いますが、中にはHTMLの構造的にどうしようもないという場合もあるかもしれません。
そのような場合はHTMLの構造から見直す必要もあり、思いのほか大掛かりな作業になってしまうという事も考えられます。
その場だけのz-indexの指定ではなく、周りの要素も想定した適切なz-indexの指定、HTMLの構造を意識していきたいですね。