概要
CSSプロパティ｢z-index｣は、要素の重なり順を指定することができます。このプロパティが有効なのは position プロパティでstatic以外の値が指定されている要素に限られます。このプロパティを使う為にはセットで覚えておくとよいでしょう。
下記のサンプルでは、三つのdiv要素が position プロパティで配置されています。通常の順序だとコードの記述した順番に重なる為、三つめのdiv要素が一番手前になります。これを z-indexの値を指定して順序を変更します。実際にz-indexの値を変更してみて、順序がどう変わるかを確認してみてください。マイナス値も含めて、z-indexの値が大きい方が優先されます。
<div class="z-index-1">一つめの要素</div>
<div class="z-index-2">二つめの要素</div>
<div class="z-index-3">三つめの要素</div>
<style>
div {
font-size: 12px;
position: absolute;
width: 100px;
height: 100px;
box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
}
.z-index-1 {
background-color: #def;
top: 0;
left: 0;
z-index: 3;
}
.z-index-2 {
background-color: #e6e6fa;
top: 30px;
left: 30px;
z-index: 2;
}
.z-index-3 {
background-color: #ffe4e1;
top: 60px;
left: 60px;
z-index: 1;
}
</style>値
整数を入れることが可能で、マイナス値も指定できます。
| 値 | 説明 |
|---|---|
| auto | 親要素の値が適用されます。指定していない場合は初期値の0となります |
| 整数 | -100, 0, 100 などの整数。小数などは認められません |
使用例
何かのお知らせなどを表示させるときに使うモーダルメニューの例です。z-indexを使用することで、本文のコードに関係なく必ず上のレイヤーにモーダルが表示されることができます。
<div class="musk"></div>
<div class="modal z-index">お知らせを表示させるモーダルメニューです</div>
<p>CSSプロパティ｢z-index｣は、要素の重なり順を指定することができます。このプロパティが有効なのは position プロパティでstatic以外の値が指定されている要素に限られます。</p>
<p>CSSプロパティ｢z-index｣は、要素の重なり順を指定することができます。このプロパティが有効なのは position プロパティでstatic以外の値が指定されている要素に限られます。</p>
<style>
.musk {
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
}
.modal {
background: #fff;
border: 2px solid #fdd;
width: 50vw;
height: 50vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.z-index {
z-index: 10;
}
</style>