z-indexを使って重なり順をつける方法とは?
新しい機能をいち早く取り入れることで、革新的なレンタルサーバーを目指すエックスサーバーの進化版「シン・レンタルサーバー」。
超高速CMS実行環境「KUSANAGI」を採用しており、高速かつセキュリティーに優れた新世代のレンタルサーバーが体験できます。
【2023年2月2日(木)まで】サーバー利用料金を5年分先払いで対象プランが半永久無料で利用できます!先着100契約限定なので、お急ぎください。詳細は、下記ボタンからどうぞ!
\ 10日間無料でお試し利用可 /
シン・レンタルサーバーはこちら
他サーバーから「シン・レンタルサーバー」への移行方法については下記記事もご覧ください。
≫ シン・レンタルサーバーに他サーバーから移行する方法を図解
≫ シン・レンタルサーバーの料金はいくら?特徴とおすすめプランを比較
この記事の目次
z-indexプロパティとは?
z-indexは、要素に重なり順を設定するためのプロパティです。positionプロパティのstatic以外の値が指定されている場合に有効となります。
z-indexの使い方
z-indexの使い方を見ていきましょう。
{
z-index:整数;
}
値には、整数を指定します。この数値が高ければ高いほど前面(上)に表示されます。
ちなみに、基準値は0となります。z-indexを指定せずにpositionプロパティを使用して要素を重ねた場合には、下にある(ソースコードの後に掛かれた部分)要素が前面にきます。
以下の様な要素を重ねて表示させて、重なり順を変更してみましょう。
使用例:HTML
<div>
<p class="sample01">sample01</p>
<p class="sample02">sample02</p>
</div>
まずは、z-indexを指定せずに表示してみます。
使用例:CSS
div{
position:relative;
width:100%;
height:230px;
background:#ccc;
}
p.sample01{
position:absolute;
width:100px;
height:100px;
background:#b7d8fb;
}
p.sample02{
position:absolute;
width:200px;
height:200px;
background:#fbb7b7;
}
使用例:プラウザ
sample01
sample02
この状態だと、sample02が前面(上)にきています。このsample02の下にsample01が隠れている状態です。これをsample01が前面にくるようにz-indexを指定します。
使用例:CSS
div{
position:relative;
width:100%;
height:230px;
background:#ccc;
}
p.sample01{
position:absolute;
/*ここを追加*/
z-index:1;
/*ここまで追加*/
width:100px;
height:100px;
background:#b7d8fb;
}
p.sample02{
position:absolute;
width:200px;
height:200px;
background:#fbb7b7;
}
使用例:プラウザ
sample01
sample02
これで、重なって表示ができました。今は2つの要素でしたが、いくつでも重なり順を指定することはできます。
z-indexを使う上での注意点
z-indexを使用する場合に注意しなければならないことがあります。
それは、「親要素の重なり順」です。例えば以下の様なコンテンツを作成したとします。
使用例:HTML
<div class="box01">
<p class="sample01">sample01</p>
</div>
<div class="box02">
<p class="sample02">sample02</p>
</div>
使用例:css
div.box01{
position:absolute;
z-index:2;
width:100%;
height:230px;
background:#ccc;
}
p.sample01{
position:absolute;
z-index:1;
width:100px;
height:100px;
background:#b7d8fb;
}
div.box02{
position:absolute;
z-index:1;
width:100%;
height:230px;
background:#ccc;
}
p.sample02{
position:absolute;
z-index:3;
width:200px;
height:200px;
background:#fbb7b7;
}
使用例:プラウザ
sample01
sample02
上記を見ると最も大きな値のz-indexが指定されているのは、「sample02」というボックスです。
しかし、最前面に表示されているのは、「sample01」です。なぜでしょうか?
実は、それぞれのボックスの親要素である「box01」と「box02」にもz-indexが指定されていることが原因です。
親要素同士の関係では、「box01」の方が値が大きいことがわかります。
つまり、「親要素にz-indexが指定されている場合、子要素のz-indexはその親要素内でしか効かない」ということです。
z-indexを使用する際には、親要素の重なり順も気にする必要があるということを覚えておきましょう。
理解するポイントまとめ
- z-indexは、要素に重なり順を設定するためのプロパティ。
- z-indexは、position:static;の要素では効かない。
- 親要素の重なり順に注意する必要がある。