初めに
cssで要素の積み重ね順を決めるz-index。ただz-indexに値を指定するだけではうまくいかない場面があります。その原因と理由について学習した内容を書いてみました。
※内容に間違いなどがある場合はご指摘をよろしくお願いします。
前回の記事
z-indexとposition
z-indexを適用させるにはpositionがstatic以外になる必要があります。
<body>
<div class="red"></div>
<div class="blue"></div>
</body>
positionをabsoluteにし、redのz-indexを５、blueのz-indexを２にします。
.red {
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
position: absolute;
z-index: 5;
}
.blue {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
margin-bottom: 50px;
z-index: 2;
}
redのz-indexが５で、blueの２より高いため、redがblueの上に乗っかっています。
positionをコメントアウトしてみます。
.red {
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
/* position: absolute; */
z-index: 1;
}
.blue {
width: 100px;
height: 100px;
background-color: blue;
/* position: absolute; */
margin-bottom: 50px;
z-index: 2;
}
redの下にblueが配置され、redとblueは重ならない状態です。positionを指定しないと要素はデフォルトのpositionであるstaticが適用され、それぞれの要素そのものが個別のcontextを生成するからです。
z-indexとcontext
複数の要素（タグ）が一つのcontextを生成するためには、要素同士がsiblings(兄弟関係）である必要があります。redとgreenは同じ階層にあり兄弟関係です。buleはredの子で、yellowはblueの子である以下のような階層構造を持つhtml文書があるとします。
<body>
<div class="red">
<div class="blue">
<div class="yellow">
</div>
</div>
</div>
<div class="green">
</div>
</body>
redを一番上にしたいので、z-indexを10にし、その下にgreenが重なるようにz-indexを4にします。その下にはさらにblueが来るようにz-indexを2に指定し、最後にyellowを１にして一番下にしたいと思います。
図で表すと以下のようなものになります。（予想図）
実際にそれに合わせてcssを記述します。
.red {
width: 100px;
height: 100px;
background-color: red;
margin-top: 40px;
position: relative;
z-index: 10;
}
.blue {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 30px;
margin-bottom: 50px;
z-index: 2;
}
.yellow {
width: 100px;
height: 100px;
background-color: yellow;
margin-left: 50px;
position: absolute;
z-index: 1;
}
.green {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: -30px;
z-index: 4;
}
結果は以下の通りです。
予想とは違いredの下にgreenが来ているものの、一番下に位置するであろうyellowはblueの上になっています。さらにredはz-indexが10であるにも関わらず、z-indexが２のblueよりも下です。何故こうなるのでしょうか。
contextは同じ階層（兄弟関係）でしか生成されない
contextは同じ階層でないと生成されません。上の例ではredとgreenが同じ階層で、blueとyellowはそれぞれ親子関係の別階層です。redとgreenが一つのcontextを生成し、blue、yellowはそれぞれの個別のcontextを生成します。合計3つのcontextが存在します。redとgreenが生成するcontext上でz-indexによる要素の上下関係が決まり、blueのcontextとyellowのcontextは順番通りにredとgreenが生成するcontextの上に積み重なるため、blueの上にyellowが乗っている形になります。
参考サイト
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