ブログ投稿日時：
ブログ更新日時：
z-indexについて解説
1.
z-index とは
z-index は要素の重なり順序を指定するプロパティです。
2.
z-index の指定方法
z-index 指定するときは下記の2つのポイントを覚えておきましょう。
- z-index は position プロパティで relative, absolute, fixed のときだけ使うことができる
- z-index で指定した値が大きい要素ほど上に表示
それでは指定方法と表示を見ていきましょう。
<div class="frame">
<div class="z-index-10">
<div class="z-index-20">
<div class="z-index-30">
</div> .frame {
position: relative;
width: 100%;
height: 400px;
background-color: white;
}
.z-index-10 {
position: absolute;
z-index: 10;
top: 50px;
left: 10%;
width: 40%;
height: 200px;
background-color: #ff0000;
}
.z-index-20 {
position: absolute;
z-index: 20;
top: 100px;
left: 30%;
width: 40%;
height: 200px;
background-color: #00ff00;
}
.z-index-30 {
position: absolute;
z-index: 30;
top: 150px;
left: 50%;
width: 40%;
height: 200px;
background-color: #0000ff;
}HTMLとCSSの表示
上記のように z-index を指定したときは指定した値が大きい要素ほど上に表示されることがわかりました。
今回は赤色の z-index: 10; を 緑色に z-index: 20; を 青色に z-index: 30; を指定しているので、赤 < 緑 < 青 の順で上に表示されています。
3.
今回のまとめ
この記事では z-index について解説しました。
z-index は要素の重なり順序を指定するプロパティです。
z-index は position プロパティで relative, absolute, fixed のときだけ使うことができます。
また、指定した値が大きい要素ほど上に表示されます。
最後までお読みいただきありがとうございます。