要素の重なり順調整: positionとz-index
「マークアップ言語シリーズ: Lesson 2 CSSの基本」の「要素の配置: 中央」で、要素の配置に関するスタイルとしてpositionを学びました。
今度は、positionと組み合わせて、要素の重なり順を調整するスタイル、 z-index を習得していきましょう。
まず、z-indexとは、 HTML要素の重なる順番を指定して調整することができる設定内容 です。
floatがどういうものか学んだ時に、webページを横面から見た図を確認しましたね。
z-indexも同じイメージでwebページを横面から見た時を想像すると、イメージしやすいです。
ただし、z-indexの場合は、どの要素が最も前面に出るか、後ろに配置させるか、順番を指定して変えることができます。
z-indexは、0が最も小さい値で、重なる順番が前面に出るにつれ、値の数値は大きくなります。
実例を見てみましょう。
以下の図を見てください。
画像要素が、重なり順では一番前に来ていて、画像の下に背景色グレーの要素が配置されていますね。
このような表示に見せるためには、「配置の調整」と「要素の重なる順番調整」2つを組み合わせて一緒に実装することで実現可能です。
では、z-indexとpositionの関連性を見ていくために、まずは上記の例を、z-indexとpositionなしで反映結果を見てみましょう。
コードと反映結果は以下です。
<div class="wrapper">
<img src="khloe-arledge-xGNi3-Hn66w-unsplash.jpg" alt="breakfast" />
<div class="shadow"></div>
</div>
* {
margin: 0;
padding: 0;
}
.wrapper {
max-width: 80%;
margin: 30px auto;
}
img {
width: 90%;
height: auto;
border-radius: 5px;
}
.shadow {
padding: 300px 95px;
width: 70%;
height: auto;
background-color: #b3c4d4;
border-radius: 5px;
}
画像要素も、グレー背景色要素も、重なり順が決まっていないので、デフォルト（初期値）の表示で、どちらの要素も前後していない状態です。
では、試しにz-indexの設定のみ、両方の要素に実装してみるとどうなるでしょうか？
/* 上記省略 */
img {
width: 90%;
height: auto;
border-radius: 5px;
/* z-index設定 */
z-index: 1;
}
.shadow {
padding: 300px 95px;
width: 70%;
height: auto;
background-color: #b3c4d4;
border-radius: 5px;
/* z-index設定 */
z-index: 0;
}
ブラウザでの反映結果が、z-indexもpositionも実装されていない時と、変化がないですね。
つまり、z-indexの設定だけでは、要素の重なり順の指定が効かないということになります。
では、要素の配置設定のpositionだけ実装すると反映結果はどうなるのでしょうか？
/* 上記省略 */
img {
width: 90%;
height: auto;
border-radius: 5px;
/* position設定 */
position: relative;
}
.shadow {
padding: 300px 95px;
width: 70%;
height: auto;
background-color: #b3c4d4;
border-radius: 5px;
/* position設定 */
position: relative;
bottom: 580px;
left: 35px;
}
今度は、背景色グレーの要素が前面に出て来てしまいました。
z-indexとpositionを一緒に組み合わせない場合は、なかなか思うようにスタイルの調整ができません。
上記の完成見本の図のように、画像を前面、背景色グレーの要素を後方と重なりを指定するには、z-indexとpositionの実装を一緒に行う必要があるということですね。
/* 上記省略 */
img {
width: 90%;
height: auto;
border-radius: 5px;
/* z-indexとposition設定 */
position: relative;
z-index: 1;
}
.shadow {
padding: 300px 95px;
width: 70%;
height: auto;
background-color: #b3c4d4;
border-radius: 5px;
/* z-indexとposition設定 */
position: relative;
bottom: 580px;
left: 35px;
z-index: 0;
}