CSS では、 z-indexプロパティは、配置された要素の積み重ね順序を制御するために使用されます。値z-index大きい要素は、値z-indexの小さい要素の前に配置されます。このプロパティは、Web ページ上に重複する要素があり、それらの表示順序を制御したい場合に特に便利です。

z-indexプロパティの使用方法の基本的な概要は次のとおりです。

構文：

 css
 selector {
  z-index: value;
}

例：

 html
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .element1 {
      position: absolute;
      top: 50px;
      left: 50px;
      background-color: red;
      width: 100px;
      height: 100px;
      z-index: 2;
    }

    .element2 {
      position: absolute;
      top: 70px;
      left: 70px;
      background-color: blue;
      width: 100px;
      height: 100px;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="element1"></div>
  <div class="element2"></div>
</body>
</html>

この例では、絶対に配置された 2 つの要素 ( element1とelement2 ) があります。 z-indexプロパティは、スタック順序を制御するために使用されます。赤いボックス ( element1 ) は青いボックス ( element2 ) よりも高いz-indexを持っているため、青いボックスの前に表示されます。

いくつかの重要な点に留意してください。

z-index位置決めされた要素 ( static以外のposition値を持つ要素) でのみ機能します。
z-index値は、正の整数と負の整数の両方、さらには 10 進数も可能です。
z-indexを使用する場合、スタッキングコンテキストは非常に重要です。 z-indexより大きい要素は、他の要素と同じスタックコンテキスト内にない場合、前面に表示されない可能性があります。より複雑なレイアウトでは、スタッキングコンテキストを理解することが重要です。

自由に値を変更し、 z-index要素の積み重ね順序にどのような影響を与えるかを実験してください。