z-indexとHTML階層、positionの関係

コード

See the Pen z-index_pre by malle9876 (@malle9876) on CodePen.

<div class="top">トップ</div>
<div class="one">要素1</div>
<div class="two">
  <span>要素2</span>
  <div class="three">要素3</div>
</div>

.top {
  border: 1px solid #000;
}
.one {
  width: 200px;
  height: 50px;
  background-color: red;
  position: absolute;
  z-index: 11;
}

.two {
  width: 200px;
  height: 50px;
  background-color: #00bfff;
  z-index: 12;
  position: absolute;
  top: 80px;
}

.three {
  width: 100px;
  height: 40px;
  background-color: yellow;
  opacity: 0.7;
  position: relative;
  left: 50px;
  top: -40px;
  z-index: 10;
}

トップという一番上の要素があり、そこから要素1、要素2と続いています。
また、要素2の中には要素3が定義されていますが、こちらは要素1の方向にはみ出しています。

CSSを見ると、要素1と要素2にはposition: absoluteが、要素3にはposition: relativeが指定されています。

さらに注目すると、z-indexの値が表示順になっていません。

要素1はz-index: 11であるのに対し、上に重なっている要素3はz-index: 10です。

なぜz-indexの値が無視されているのか

まず、要素2と要素3の関係についてみていきます。
要素3は、要素2の子要素として定義されています。

<div class="two">
  <span>要素2</span>
  <div class="three">要素3</div>
</div>

このようなとき、何も指定していなくても重なり順は子要素、親要素となり、z-indexではこの順番を変えることができません。
要素2もz-index: 12と、要素3のz-index: 10より大きいですが、このようなルールにより要素3のほうが上に重なり表示されます。

次に要素1と要素2の関係をみていきます。

<div class="one">要素1</div>
<div class="two">
  <span>要素2</span>
  <div class="three">要素3</div>
</div>

要素1はz-index: 11、要素2はz-index: 12を持っています。
特に子要素、親要素の関係ではないため、重なっていないように見えますが、実は要素2のほうが前に出ていることがわかります。

ここまでの情報を整理すると、重なり順はそれぞれ
要素3 > 要素2
要素2 > 要素1
となっています。

要素1より、要素3が前に出ている理由は、上記の関係から分かるかと思います。
つまり、要素3の親要素である要素2がもともと要素1よりも前に出ており、子要素は親要素より前に表示されるというルールのため、要素2より要素3のほうが前に出ている、ということです。

position: absoluteを外す

ここで、何らかの都合で要素2のposition: absoluteを外さなくてはならなくなったとします。
まずないと思いますが。
position: absoluteを外し、要素1に被らないようにmargin-topをつけます。

See the Pen z-index by malle9876 (@malle9876) on CodePen.

要素3が要素1に被ってしまいました。

被る理由

こちらのページの説明では、z-indexは以下のように書かれています。
https://developer.mozilla.org/ja/docs/Web/CSS/z-index

位置指定されたボックス (つまり、position が static 以外のもの) では、z-index プロパティが以下のことを定義します。

1.現在の重ね合わせコンテキストにおけるボックスの重ね合わせレベル
2.ボックスがローカルな重ね合わせコンテキストを作るかどうか

positionを何も指定してない場合、全ての要素はposition: staticを持ちます。
そして、引用文からposition: staticがある要素ではz-indexは効果がないことがわかります。
そのため、先ほどはあった要素2　>　要素1という表示順の関係がなくなってしまったのです。

すると、どうでしょうか。
要素2はz-indexが意味を持たず、表示順の競争から脱落。
要素1と要素3同士の戦いになります。

要素1と要素3のz-indexの値はそれぞれ11と10。
そのため、z-indexの値が大きい要素1が上に表示されてしまったのでした。

教訓

z-indexの値は、表示するページ全体を見て決めた方がよいですね。
そもそもpositionがついたりつかなかったりしてるのが悪いと思いますが。