z-indexプロパティの説明
CSSのz-indexプロパティは、位置指定された要素の重なり順を指定します。通常、要素が重なった時に画面の手前に表示されるのは、HTMLのソースコード上で後に書かれたものです。
この機能を有効にするには、まず対象となる要素が位置指定を受け入れる状態になっていなければなりません。そのため、positionプロパティでstatic以外の値を指定します。そうすると、要素は通常のレイアウトのフローから外れて位置指定の対象となります。
z-indexは、要素のスタッキング・コンテキスト（重ね合わせ）を操作します。これは画面の奥行きを表すZ軸の位置を操作するという意味です。指定された数値が小さいほど奥へ、大きいほど手前に表示されます。ここで言う数値のことをスタックレベル（stack level）と言います。
位置指定された要素を制御するには以下のプロパティを使用します。
z-indexに指定できる値
auto- 既定値に従います。要素は親要素のスタッキング・コンテキストを引き継ぎます。
<integer>- 新しいスタッキング・コンテキストを作成します。要素は与えられた数値で大きいものほど手前に重なります。これに含まれる子要素は、外部のスタッキング・コンテキストの影響を受けません。
z-indexの使い方とサンプルコード
z-indexプロパティの構文は以下の通りです。
/* キーワード値 */
z-index: auto;
/* <integer>値 */
z-index: 0;
z-index: 3;
z-index: 999;
z-index: -3;
z-index: -999;
/* グローバル値 */
z-index: inherit;
z-index: initial;
z-index: revert;
z-index: unset;
z-indexの実例
それでは実際にz-indexプロパティの書き方を見ていきましょう。以下の例は、位置指定された要素の重なり順を変えた時にどのように表示されるのか、動的に確認できる内容です。色のついたブロックは既定値で配置されています。サンプルのスイッチを押して、z-indexの値を変えてみましょう。
<section class="samp_box">
<!--=== 切り替えスイッチ用 ===-->
<input type="radio" name="s" id="zi_3">
<input type="radio" name="s" id="zi_4">
<input type="radio" name="s" id="zi_5">
<!--/=== 切り替えスイッチ用 ===-->
<p>z-index: 3;</p>
<p>z-index: 5;</p>
<div id="item_1">item_1</div>
<div id="item_2">item_2</div>
<div id="item_3">item_3</div>
</section>
<cection class="control">
<label for="zi_3">z-index: 3;</label>
<label for="zi_4">z-index: 4;</label>
<label for="zi_5">z-index: 5;</label>
</cection>
.samp_box {
position: relative;
width: 100%;
height: 220px;
padding: 0 1rem 1rem;
background-color: #eee;
overflow: auto;
}
.samp_box > p {
position: relative;
padding: .5rem;
border: 1px solid #333;
background-color: #fff;
text-align: center;
}
.samp_box > p:nth-of-type(1) {
top: 30px;
z-index: 3;
}
.samp_box > p:nth-of-type(2) {
top: 60px;
z-index: 5;
}
.samp_box > div {
position: absolute;
left: 50%;
width: 100px;
height: 200px;
padding: .5rem;
border: 1px solid #999;
}
#item_1 {
top: 10px;
margin-left: -170px;
background-color: #fcc;
}
#item_2 {
top: 10px;
margin-left: -50px;
background-color: #ccf;
}
#item_3 {
top: 10px;
margin-left: 70px;
background-color: #cfc;
}
.control {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 1rem;
text-align: center;
}
.control > label {
display: block;
padding: .3rem .5rem;
border: 1px solid #ccc;
background-color: #09f;
color: #fff;
text-align: center;
cursor: pointer;
}
input[type="radio"] {
display: none;
}
#zi_3:checked ~ #item_1 {
z-index: 3;
}
#zi_4:checked ~ #item_2 {
z-index: 4;
}
#zi_5:checked ~ #item_3 {
z-index: 5;
}