z-index=-1が効かない理由
通常HTMLやCSSを記述していくと子要素は親要素の上に重ねられていきますので、親要素が下で子要素が上という順番になります。
しかしボーダーラインの色をグラデーションにしたいなど、ケースによっては子要素を親要素の下に配置したいときがあります。
この時、子要素に「z-index=-1」を指定してあげると、親要素の下に子要素を配置することができますが、記述の仕方によってはうまくいかないケースがあります。
早速結論を書いていきます。
結論：親要素がスタッキングコンテキストをもつと「z-index=-1」が効かなくなる。
スタッキングコンテキスト
「スタッキングコンテキスト」とは「重なる順番の情報」であり、「スタッキングコンテキストをもつ」とは「重なる順番の情報をもつ」ということになります。
つまり「スタッキングコンテキストをもつ」ということは「z-indexが何かの値をもっている」と考えることができます。
z-indexは初期値がautoですので、「z-indexがauto以外の値を持っている」と考えて良いかと思います。
先程の結論を言い換えますと、
「親要素のz-indexがauto以外の値を持っていると、子要素のz-index=-1は効かなくなる。」
ということになります。
z-index=-1の使用例
子要素を親要素の上に持ってきたい場合ですが、一例として下記のようなコードになります。
<div class="parent">親要素
<div class="child">子要素</div>
</div>.parent{
width: 200px;
height: 50px;
color: white;
background-color: blue;
position: relative;
}
.child{
position: absolute;
top: -20px;
right: -20px;
bottom: -20px;
left: -20px;
background-color: green;
z-index: -1; /*子要素にz-index=-1を指定*/
}上記コードを実行すると、下の画像のような形になります。子要素が緑背景で、親要素が青背景です。緑の上に青がありますので、子要素の上に親要素がある状態です。言い換えますと親要素の下の子要素があります。
つまり子要素に「z-index=-1」を指定することで親要素の下に子要素が配置されています。
ここで親要素にもz-indexを指定するとどうなるかを確認してみます。
.parent{
width: 200px;
height: 50px;
color: white;
background-color: blue;
position: relative;
z-index: 0; /*親要素にz-indexを追加*/
}「親要素」というテキストはありますが置いておいてください。親要素は青背景のブロックですが表示されていません。これは青の上に緑がある状態となっているからです。つまり親要素の上に子要素が配置されていることが確認できます。
つまり親要素のz-indexに「auto以外」を指定してしまうと、子要素は「z-index=-1」が効かない状態になってしまいます。
スタッキングコンテキストをもつケース
スタッキングコンテキストをもつ、すなわちz-indexが「auto以外」になるということですが、これはz-indexを指定していなくても発生することがあります。
例えば「opacity:0.9」と設定すると、強制的に「z-index=0」が割り振られます。
z-indexの値は割り振られるだけで、値自体はz-index指定で上書きすることは可能です。（z-indexの値を変える場合は、「position=static以外」をきちんと指定してからz-indexの値を指定する必要があります。） ただし「z-index=auto」で上書きすることができません。
つまり自分ではz-indexを指定していないのに、勝手に「z-index=auto」から「z-index=0」となってしまうということです。
先程のコードを下記のようにしても、子要素の「z-index=-1」が効かなくなります。
.parent{
width: 200px;
height: 50px;
color: white;
background-color: blue;
position: relative;
opacity: 0.9; /*z-indexの代わりにopacityを追加*/
}これは親要素に「opacity:0.9」と設定したため勝手に「z-index=0」となってしまい、親要素のz-indexに「auto以外」が指定されたことで、子要素は「z-index=-1」が効かない状態になったということになります。
z-indexを指定していないのにもかかわらず勝手に「z-index=0」となってしまうケース、つまりスタッキングコンテキストをもつケースはおおまかにですが下記のとおりです。
・
positionの値がfixedまたはstickyの要素
・opacityの値が1未満である要素・transform、filter、perspective、clip-pathの値が「none」以外の要素
引用元：重ね合わせコンテキスト
先程の例は親要素に「opacity:0.9」を設定しましたが、「transform:scale(1.2)」とか指定しても同じように、z-indexを指定していないのに勝手に「z-index=0」となってしまいます。
まとめ
z-index=-1が効かない理由について、「親要素のz-indexがautoになっているかいないか」という点に注目してまとめてみました。
この記事をご覧いただけた方が「z-indexがうまくいかない」→「スタッキングコンテキスト（重ね合わせコンテキスト）を調べてみよう」という認識を持って頂けるだけでもありがたいです。