CSS配置レイアウト：z-indexを理解する：スタッキングコンテキスト例2の解説

HTML

<!DOCTYPE html>
<html>
<head>
<title>Z-Index and Stacking Context Example 2</title>
<style>
#container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

#div1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: red;
  z-index: 1;
}

#div2 {
  position: absolute;
  top: 50px;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: green;
  z-index: 2;
}

#div3 {
  position: absolute;
  top: 100px;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: blue;
  z-index: 1;
}

#div4 {
  position: absolute;
  top: 0;
  left: 150px;
  width: 50px;
  height: 50px;
  background-color: purple;
  z-index: 3;
}

#div5 {
  position: absolute;
  top: 50px;
  left: 150px;
  width: 50px;
  height: 50px;
  background-color: cyan;
  z-index: 0;
}
</style>
</head>
<body>
<div id="container">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <div id="div4"></div>
  <div id="div5"></div>
</div>
</body>
</html>

説明

この例では、5 つの div 要素が #container コンテナ内に配置されています。

div5 はシアン色で、div4 の下に配置されていますが、z-index が 0 なので、div4 の上に配置されます。
div4 は紫色で、右上に配置されています。
div3 は青色で、div1 と同じ z-index (1) を持っていますが、div2 の下にあるため、div2 の後ろに配置されます。
div2 は緑色で、div1 の上に配置されています。
div1 は赤色で、左上に配置されています。

結果

この例の結果は次のようになります。

div5 は z-index が 0 ですが、div4 の下に配置されているため、div4 の上に表示されます。
div3 は div1 と同じ z-index を持っていますが、div2 の下にあるため、div2 の後ろに表示されます。
div2 は div1 よりも z-index が高いため、div1 の上に表示されます。
div4 は z-index が最も高いため、一番上に表示されます。

スタッキングコンテキスト

この例では、#container 要素がスタッキングコンテキストを作成します。スタッキングコンテキストとは、その中の要素の重なり順序を決定する領域です。要素に position: absolute または position: fixed が設定されている場合、その要素は親要素のスタッキングコンテキストに属します。

HTML

<!DOCTYPE html>
<html>
<head>
<title>Z-Index and Stacking Context Example</title>
<style>
#container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

#div1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: red;
  z-index: 1;
}

#div2 {
  position: absolute;
  top: 50px;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: green;
  z-index: 2;
}

#div3 {
  position: absolute;
  top: 100px;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: blue;
  z-index: 1;
}

#div4 {
  position: absolute;
  top: 0;
  left: 150px;
  width: 50px;
  height: 50px;
  background-color: purple;
  z-index: 3;
}

#div5 {
  position: absolute;
  top: 50px;
  left: 150px;
  width: 50px;
  height: 50px;
  background-color: cyan;
  z-index: 0;
}
</style>
</head>
<body>
<div id="container">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <div id="div4"></div>
  <div id="div5"></div>
</div>
</body>
</html>

説明

div5 はシアン色で、div4 の下に配置されていますが、z-index が 0 なので、div4 の上に配置されます。
div4 は紫色で、右上に配置されています。
div3 は青色で、div1 と同じ z-index (1) を持っていますが、div2 の下にあるため、div2 の後ろに配置されます。
div2 は緑色で、div1 の上に配置されています。
div1 は赤色で、左上に配置されています。

結果

div5 は z-index が 0 ですが、div4 の下に配置されているため、div4 の上に表示されます。
div3 は div1 と同じ z-index を持っていますが、div2 の下にあるため、div2 の後ろに表示されます。
div2 は div1 よりも z-index が高いため、div1 の上に表示されます。
div4 は z-index が最も高いため、一番上に表示されます。

スタッキングコンテキスト

div1、div2、div4 を相対配置 (position: relative) にすることで、z-index を使用せずに要素を積み重ねることができます。この場合、要素は通常のドキュメントフローに従って配置されますが、top、left、bottom、right などのプロパティを使用して個々の要素の位置を調整できます。

<!DOCTYPE html>
<html>
<head>
<title>Z-Index Alternative 1</title>
<style>
#container {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

#div1 {
  position: relative;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: red;
}

#div2 {
  position: relative;
  top: 50px;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: green;
}

#div3 {
  position: relative;
  top: 100px;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: blue;
}

#div4 {
  position: relative;
  top: 0;
  left: 150px;
  width: 50px;
  height: 50px;
  background-color: purple;
}

#div5 {
  position: relative;
  top: 50px;
  left: 150px;
  width: 50px;
  height: 50px;
  background-color: cyan;
}
</style>
</head>
<body>
<div id="container">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <div id="div4"></div>
  <div id="div5"></div>
</div>
</body>
</html>

この例では、div1、div2、div4 は相対配置され、top および left プロパティを使用して希望の位置に配置されます。div3 と div5 はデフォルトのフローに従って配置されます。

代替方法 2: グリッドレイアウトを使用する

CSS グリッドレイアウトを使用して、要素をより柔軟に配置し、z-index を使用せずに要素を積み重ねることができます。グリッドレイアウトは、行と列のグリッドを作成し、要素をそのグリッド内のセルに配置するレイアウトシステムです。

<!DOCTYPE html>
<html>
<head>
<title>Z-Index Alternative 2</title>
<style>
#container {
  display: grid;
  grid-template-columns: repeat(2, 50px);
  grid-template-rows: repeat(3, 50px);
  gap: 10px;
  background-color: #ccc;
}

#div1 {
  background-color: red;
  grid-row: 1;
  grid-column: 1;
}

#div2 {
  background-color: green;
  grid-row: 2;
  grid-column: 1;
}

#div3 {
  background-color: blue;
  grid-row: 3;
  grid-column: 1;
}

#div4 {
  background-color: purple;
  grid-row: 1;
  grid-column: 2;
}

#div5 {
  background-color: cyan;
  grid-row: 2;
  grid-column: 2;
}
</style>
</head>
<body>
<div id="container">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <div id="div4"></div>
  <div id="div5"></