要素の重なり順を指定する

CSS - z-index

 概要

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>

 

仕様書

関連CSSプロパティ