CSS レイアウト – z-indexプロパティ

z-indexプロパティは要素の重なり順序を指定します。

z-indexプロパティ
別のz-indexの例
z-indexなし
CSSプロパティ

z-indexプロパティ

要素が位置決めされると、他の要素と重なることがあります。

z-indexプロパティは要素の重なり順序を指定します（どの要素が前面に配置され、どの要素が背面に配置されるか）。

要素は正のスタック順序または負のスタック順序を持つことができます：

この <img> 要素はz-indexが-1であるため、テキストの背面に配置されます。

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

注: z-indexは、位置決めされた要素（position: absolute、position: relative、position: fixed、またはposition: sticky）およびflexアイテム（display: flex要素の直接の子要素）にのみ機能します。

別のz-indexの例

ここでは、スタック順序が高い要素が常にスタック順序が低い要素の上に配置されることがわかります：

<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  z-index: 1;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  z-index: 3;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  z-index: 2;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>

</body>
</html>

z-indexなし

2つの位置決めされた要素がz-indexを指定せずに重なる場合、HTMLコードで後に定義された要素が上に表示されます。

上記と同じ例ですが、ここではz-indexが指定されていません：

<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>

</body>
</html>

CSSプロパティ

Property	Description
`z-index`	要素のスタック順序を設定します