CSSにおける重ね合わせ

作成日：2024/08/07

目標

CSS おける重ね合わせの使用を理解し、不用意なバグを回避すること。 z-index が生成するスタッキングコンテキスト以外の重ね合わせの優先順位を理解する。

CSS における重ね合わせの種類

重ね合わせの種類について大まかに以下の 5 つに分類でき、これらの順序に従って背面から手前方向に向かって重ね合わせが行われる。

  1. 位置指定なしの子孫要素、HTML 内での出現順
  2. 浮動要素、HTML 内での出現順
  3. 位置指定なしの子孫のインラインレベルコンテンツ
  4. 位置指定ありの子孫要素、HTML 内での出現順
  5. スタッキングコンテキスト

位置指定なしの子孫要素、HTML 内での出現順

position プロパティにおいて static が設定されている要素のこと（参考）。 下記のような HTML がある場合、.box2があとから来るので最前面に表示される。

<div class="box1"></div>
<div class="box2"></div>

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
}
.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-top: -50px; /* ネガティブマージンで無理やり重ねる */
}

浮動要素、HTML 内での出現順

float プロパティが設定されている要素のこと（参考）。 下記のような HTML がある場合、.box2があとから来るので最前面に表示される。

<div class="box1"></div>
<div class="box2"></div>

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  float: left;
  margin-right: -50px;
}
.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  float: left;
}

位置指定なしの子孫のインラインレベルコンテンツ

display プロパティにおいて inline が設定されている要素や span などの要素のこと（参考）。 下記のような HTML がある場合、.box2があとから来るので最前面に表示される。

<div class="box1"></div>
<div class="box2"></div>

.box1 {
  background-color: red;
  display: inline-block;
  width: 100px;
  height: 100px;
}
.box2 {
  background-color: blue;
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-left: -50px;
}

位置指定ありの子孫要素、HTML 内での出現順

position プロパティにおいて static以外 が設定されている要素のこと（参考）。 下記のような HTML がある場合、.box2があとから来るので最前面に表示される。

<div class="box1"></div>
<div class="box2"></div>

.box1 {
  background-color: red;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 50px;
}
.box2 {
  background-color: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 100px;
  left: 100px;
}

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

z-indexが設定されている要素などのこと（参考）。 z-index以外にもスタッキングコンテキストを生成する条件はあるが、ここでは z-index のみを取り上げる（参考）。 下記のような HTML がある場合、スタッキングレベルの高い .box1 が最前面に表示される。 同じスタッキングレベルの場合は HTML 内での出現順によって前面表示されるので、.box3 が .box2 よりも前面に表示される。

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

.box1 {
  background-color: red;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 75px;
  left: 75px;
  z-index: 2;
}
.box2 {
  background-color: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 1;
}
.box3 {
  background-color: green;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 150px;
  left: 150px;
  z-index: 1;
}

重なり順の検証

位置指定なしの子孫要素 VS 浮動要素

下記の HTML がある場合、.float-box の方が重ね合わせの優先順位が高いため出現順にかかわらず.static-boxよりも前面に表示される。

<div class="float-box"></div>
<div class="static-box"></div>

.float-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  float: left;
  margin-left: 50px;
}
.static-box {
  width: 100px;
  height: 100px;
  background-color: red;
}

浮動要素 VS 位置指定なしの子孫のインラインレベルコンテンツ

下記の HTML がある場合、.inline-box の方が重ね合わせの優先順位が高いため出現順にかかわらず.float-boxよりも前面に表示される。

<div class="inline-box"></div>
<div class="float-box"></div>

.inline-box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  margin-left: -50px;
}
.float-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  float: left;
}

位置指定なしの子孫のインラインレベルコンテンツ VS 位置指定ありの子孫要素

下記の HTML がある場合、.positioned-box の方が重ね合わせの優先順位が高いため出現順にかかわらず.inline-boxよりも前面に表示される。

<div class="positioned-box"></div>
<div class="inline-box"></div>

.positioned-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  top: 50px;
  left: 50px;
}
.inline-box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
}

位置指定ありの子孫要素 VS スタッキングコンテキスト

下記の HTML がある場合、.stacking-context に設定されているスタッキングレイヤーが.positioned-boxよりも高いため出現順にかかわらず.positioned-boxよりも前面に表示される。

<div class="stacking-context"></div>
<div class="positioned-box"></div>

.stacking-context {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
}
.positioned-box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
}

まとめ

CSS における重ね合わせの優先順位は以下の通りである。

  1. 位置指定なしの子孫要素、HTML 内での出現順
  2. 浮動要素、HTML 内での出現順
  3. 位置指定なしの子孫のインラインレベルコンテンツ
  4. 位置指定ありの子孫要素、HTML 内での出現順
  5. スタッキングコンテキスト

重ね合わせの順番といえば z-index スタッキングコンテキストだと思っていたがそれ以外にも重ね合わせの優先順位があることを知った。これらの順番を理解しておくことで、不用意なバグを回避することができる。

©Sey