ywork2020.com

Title

重なり合った要素を前面、または背面に移動する

目次 (INDEX)

z-indexとは

ここで説明する z-index とは次の語句からなるCSSのプロパティです。
z
読み: ゼット
意味: z軸、3次元の奥行の意味
index
読み: インデックス
意味: 索引、見出し

目次に戻る

z-indexプロパティの概要

このプロパティは位置指定を行った要素と、その子孫要素、またはフレックスアイテムの重なり順を定義します。

重なり合った要素の場合、大きな z-index の値を持つ要素は、小さな z-index の値を持つ要素の上に重なります。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{z-index: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルでは、3つのdiv要素を題材にしました。

少しコードが長く分かりづらいかもしれませんが、重要なのは z-index の値だけですので、そこを見て下さい。 重なり合った要素は、この z-index の値が大きいほど前面に描画されます。

なお、要素が重なり合う状況がになるのは、 position プロパティを使用して要素の位置を調整した場合です。 また、position で位置を指定するには left プロパティと top プロパティを使用します。

目次に戻る

初期値: auto

初期値の auto を使用すると、重なり合った要素はhtml文書の後に記述された要素ほど前面に描画されます。 つまり、初期値ですので設定しなくても、この値が元から設定されているということです。

これは、先に読み込まれた要素から順に z-index の値が自動で割り振られていくということになりますので、 意識して z-index の値を設定する必要はありません。



z-index: auto
z-index: auto
z-index: auto



サンプルコード: CSS
<style>
	.clsDiv{
		border: thin solid ##darkgray;
		margin: 10px;
		padding: 5px;
		width: 100px;
		height: 100px;
		text-align: center;
		float: left;
	}
	#idDiv0{
		background-color: ##lightpink;
		position: relative;
		left: -20px;
		top: -40px;
		z-index: auto;
	}
	#idDiv1{
		position: relative;
		background-color: ##lightblue;
		left: 10px;
		top: -10px;
		z-index: auto;
	}
	#idDiv2{
		position: relative;
		background-color: ##lightgreen;
		left: -170px;
		top: 40px;
		z-index: auto;
	}
</style>
サンプルコード: HTML
<body>
	<div class ="clsDiv" id="idDiv1">z-index: auto</div>
	<div class ="clsDiv" id="idDiv0">z-index: auto</div>
	<div class ="clsDiv" id="idDiv2">z-index: auto</div>
</body>

目次に戻る

数値: 奥行インデックスの値

重なり合った要素の z-index の値を、各々に指定すると、値が大きい要素ほど前面に表示されます。

ここでは、小さな値 (0 ~ 2) で設定しましたが、値が飛んでも構いません。 つまり、z-index の値が100の要素と1000の要素を作っても構わないということです。とにかく値の大きな要素が前面に描画されます。



z-index: 1
z-index: 0
z-index: 2



サンプルコード: CSS
<style>
	.clsDiv{
		border: thin solid ##darkgray;
		margin: 10px;
		padding: 5px;
		width: 100px;
		height: 100px;
		text-align: center;
		float: left;
	}
	#idDiv0{
		background-color: ##lightpink;
		position: relative;
		left: -20px;
		top: -40px;
		z-index: 0;
	}
	#idDiv1{
		position: relative;
		background-color: ##lightblue;
		left: 10px;
		top: -10px;
		z-index: 1;
	}
	#idDiv2{
		position: relative;
		background-color: ##lightgreen;
		left: -170px;
		top: 40px;
		z-index: 2;
	}
</style>
サンプルコード: HTML
<body>
	<div class ="clsDiv" id="idDiv1">z-index: 1</div>
	<div class ="clsDiv" id="idDiv0">z-index: 0</div>
	<div class ="clsDiv" id="idDiv2">z-index: 2</div>
</body>

目次に戻る

グローバル値

z-indexプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値のautoに戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{z-index: グローバル値;}

目次に戻る

補足説明

  • 位置指定要素に適用可能 (positionプロパティを適用した要素)
  • 親要素の値を継承しない

目次に戻る