初めに
cssで要素の積み重ね順を決めるz-index。ただz-indexに値を指定するだけではうまくいかない場面があります。その原因と理由について学習した内容を書いてみました。
※内容に間違いなどがある場合はご指摘をよろしくお願いします。
z-indexとは
MDNの公式ドキュメントには以下のように解説されています。
CSS の z-index プロパティは、位置指定要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。
要するに同じ積み重ねコンテキスト(stacking context）内の要素同士の積み重ねレベルを指定し、表示される上下の位置関係を指定するプロパティです。ここで重要な概念がstacking contextです。
単純にz-index値を高くするだけでは、要素の積み重ね度は変わらない
要素は記述した順に下から上へと積み重なります。
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="yellow"></div>
</body>
.red {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: -50px;
}
.blue {
width: 100px;
height: 100px;
background-color: blue;
margin-bottom: -50px;
}
.yellow {
width: 100px;
height: 100px;
background-color: yellow;
}
これを赤の上に青、その上に黄が積み重なっています。
この状態で青を一番下にし、次に赤、黄が来るようにz-indexを指定してみます。
.red {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: -50px;
z-index: 2; //追記
}
.blue {
width: 100px;
height: 100px;
background-color: blue;
margin-bottom: -50px;
z-index: 1; //追記
}
.yellow {
width: 100px;
height: 100px;
background-color: yellow;
z-index: 3; //追記
}
結果は前と同じです。このようにz-indexを指定するだけでは要素の積み重ね順を変えることはできません。
Contextとは
要素が積み重なるには土台（ベース）となるものが必要です。お家が建つには土台となる地面が無いとダメですよね。それと同じく要素は何かの土台の上に積み重ねられています。cssでは積み重ねの概念としてcontextというものがあります。同じcontext（土台）の要素同士でしかz-indexは適用されないです。
htmlは階層構造になっていて、要素には必ず親子関係があります。要素の積み重ね順は親要素がcontext(土台）であり、そのcontext上の同じ階層の兄弟要素（siblings)同士にしか適用されません。先程の例でいうとbody要素のcontext上にred,blue,yellowという3つの兄弟要素があるので、積み重ね順が決まるのです。
<body> //bodyタグが親要素でありcontextを生成している
<div class="red"></div> //bodyが生成するcontext内にある
<div class="blue"></div>
<div class="yellow"></div>
</body>
仮に次のようにredの中にbuleがあり、blueの中にさらにyellowがあった場合はどうなるでしょうか。
<body>
<div class="red">
<div class="blue">
<div class="yellow"></div>
</div>
</div>
</body>
cssの記述は以下の通り。
.red {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: -50px;
}
.blue {
width: 100px;
height: 100px;
background-color: blue;
margin-bottom: -50px;
}
.yellow {
width: 100px;
height: 100px;
background-color: yellow;
}
結果としては黄色だけになってしまいました。
この原因はbodyタグのcontext上にredがあり、redタグのcontext上にさらにblueが、またblueタグのcontext上にyellowがあるからです。土台がそれぞれbody,red,blueと違うので家（red,blue,yellow)もその3つの土台を基準にして建っています（stacking)。つまり、要素の積み重ね順は親要素を基準にした同じcontext内で決まります。
参考サイト
https://developer.mozilla.org/ja/docs/Web/CSS/z-index
https://coliss.com/articles/build-websites/operation/css/4-reasons-z-index-isnt-working.html
https://jajaaan.co.jp/web-production/frontend/z-index/
https://qiita.com/hoto17296/items/42e62989193504d512c7