CSSのz-indexで親要素よりも下に子要素を配置するときのやり方についてです。
基本的には子要素にposition:static以外(relativeやabsolute)を指定してz-indexを-1に指定することで「親要素が上に」「子要素が下に」の順序でZ軸に要素の重ね合わせが可能になります。
HTMLの構造が少し複雑になると、親要素より下のさらに下に子要素が配置されてしまい「CSSでz-indexを指定したら子要素が消えた」ということになるので、目標としては「CSSのz-indexで親要素のすぐ下に子要素を配置する」です。
z-indexで親要素より子要素を下にする
CSSのz-indexで親要素より子要素を下に配置する例として以下のHTML記述を用意しました。
<div class="wrapper">
<ul>
<li class="blue"></li>
<li class="yellow"></li>
<li class="green"></li>
</ul>
</div>
CSSで親要素のulをボックスにして、親のボックスよりも子要素のli3つをz-indexで下に配置する確認をしたくて書いたシンプルなHTMLです。
CSSでは、それぞれ異なる背景色でデザインした青、黄、緑の子要素liを、黒背景の親要素ulの下にz-indexで配置します。
z-indexで親要素よりも下に子要素を配置するために必要なCSSの記述は、position:static以外(relativeやabsolute)を指定してz-indexの値にマイナス整数値を指定することです。
今回の記述例だと「親要素のulにposition: relative;」「子要素のliにposition: absolute;とz-index:-1」を記述し指定します。以下がCSSの記述例ですがデザインも含めています。
ul{
list-style: none;
width: 100%;
max-width:640px;
height: 420px;
padding: 0;
margin: 10px auto;
background-color: #333;
position: relative; /*親要素のポジション*/
}
li{
width: 300px;
height: 130px;
position: absolute; /*子要素のポジション*/
z-index:-1; /*子要素の重なり順を親の下に変更*/
}
li:hover{
transform: translateX(-30px);
transition: ease-out 1s;
}
.blue{
background-color: #3f51b5;
top: 10px;
left: -80px;
}
.yellow{
background-color: #ffeb3b;
top: 145px;
left: -80px;
}
.green{
background-color: #009688;
bottom: 10px;
left: -80px;
}
CSSのz-indexを子要素に指定した親要素と子要素の重なり順序をスクリーンショットした表示結果は以下の画像です。
CSSで子要素liにz-indexの値を-1で指定したことで親要素より子要素を下に配置することが表示上ではできました。
いい感じのように見えますが、実はhoverが効かなくなりますし、親要素ulの上階層にdivでラッピング要素などがある場合には、z-index:-1を記述したことが原因で子要素は消えます。
z-index:-1で子要素が消える場合
CSSのz-indexに-1の値を指定して親要素より下に子要素を配置することができた表示結果でしたが、親要素のすぐ下ではなく「上階層の要素下」に子要素が配置されることがあります。
親要素のさらに上階層の要素下に表示してしまうため、背景色が適用してあるとz-indexを指定した子要素は消えることになります。正確に言えば「隠れてる」です。
例えばwrapperクラスを付与した要素が上の階層にある場合
.wrapper {
background: aliceblue;
}<div class="wrapper"> <!-- 背景色を適用したのはdivのwrapper -->
<ul>
<li class="blue"></li>
<li class="yellow"></li>
<li class="green"></li>
</ul>
</div>
z-index:-1で親要素より下に子要素を配置した青、黄、緑のli要素が消えました。
上階層の要素(wrapper)に適用した背景色を透過すると、どの階層で子要素が表示しているか視覚的に分かりやすいです。
子要素にz-index:-1を記述して消えたのが親要素のすぐ下ではなく、さらに上の要素で消えてる場合は、その要素にposition:static以外の指定とz-indexの指定がない可能性があります。
今回ならwrapperクラスのdivがpositonとz-indexを指定していないので該当する要素です。
z-index:-1で子要素が消えることになった上階層の要素に背景色を適用しないのであれば、表示的には問題ないのですが、子要素が上階層の要素に覆われているのでhoverが効かなくなったりします。
親要素のすぐ下に子要素を配置できるようにします。
z-index:0で親要素の下に子要素を配置
以下のHTMLは、今回CSSのz-indexで親要素より下に子要素を配置するための説明で使用したHTMLです。
<div class="wrapper">
<ul>
<li class="blue"></li>
<li class="yellow"></li>
<li class="green"></li>
</ul>
</div>
liにはposition: absoluteとz-index: -1が指定してあり、ulにはposition: relativeがCSSで指定してあります。現状では親要素の下に子要素が配置ではなく、wrapper要素の下にz-indexで子要素が配置されている状態です。
しっかりと親要素の下に子要素を配置する場合は<div class=”wrapper”>のwrapperクラスをCSSでクラスセレクタにしてposition: relativeとz-index:0を指定します。
すると親要素の下にしっかり子要素を配置することができます。
親要素の下に配置した子要素のhoverも効くようになります。
z-index:0で親要素の下に子要素を配置することができましたが、例えばmain要素などの要素が存在するHTMLの階層構造になる場合もありますね。
<div class="wrapper">
<main>
<ul>
<li class="blue"></li>
<li class="yellow"></li>
<li class="green"></li>
</ul>
</main>
</div>
この場合にはwrapperにz-index:0ではなくmain要素にz-index:0を指定します。そうするとしっかり親要素の下に子要素を配置することができます。
子要素の直接の親要素(ul)にはz-indexを指定しません。直接の親にz-indexを指定してしまうと、その子要素にz-indexをマイナス値を与えても効きませんので親要素の下に配置できなくなります。
CSSのz-indexプロパティはZ軸における要素の重ね合わせ順序を指定できるので、便利ですが、扱いずらくもあります。
上手にz-indexを扱えるようになるポイントとしてはスタックコンテキストの理解を深めることだと思っています。
スタックコンテキストについては上手く説明できる自信がないので時間があるときにでもMDNの「重ね合わせコンテキスト」のページを参考にしてみてください。
