CSS入門(z-indexの使い方)

z-indexの使い方について書いています。z-indexで、要素の重なり順を指定します。「position」とセットで使います。

記述の仕方

/* 記述例 */
セレクタ名{
  z-index: 数値;
}

z-indexで指定する数値は、大きい方が上になります。数値はマイナスも指定できます。

下準備

まず、赤、緑、青の四角形を用意して、positionで重ねます。デフォルトでは、あとに書いた要素が上に重なります。z-indexは、まだ使用しません。

<div id="sample1">
  <div id="sample1-1"></div>
  <div id="sample1-2"></div>
  <div id="sample1-3"></div>
</div>

#sample1{
  position: relative;
}
#sample1-1{
  height: 100px;
  width: 100px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
}
#sample1-2{
  height: 100px;
  width: 100px;
  background-color: green;
  position: absolute;
  top: 20px;
  left: 20px;
}
#sample1-3{
  height: 100px;
  width: 100px;
  background-color: blue;
  position: absolute;
  top: 40px;
  left: 40px;
}

表示例

z-indexを使用していないので、青、緑、赤の順で表示されます。

z-indexで重なり順を指定する

それでは、z-indexを使って重なり順を指定します。赤、緑、青の順に表示されます。

#sample1{
  position: relative;
}
#sample1-1{
  height: 100px;
  width: 100px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
#sample1-2{
  height: 100px;
  width: 100px;
  background-color: green;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
}
#sample1-3{
  height: 100px;
  width: 100px;
  background-color: blue;
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 1;
}

表示例

まとめ

使いどころは多くないですが、使えると表現の幅が広がるかもしれません。