z-indexのしくみ

z-indexプロパティとは？

• 要素のz軸（垂直）方向の位置を決めるプロパティ
• 要素の重なり順をコントロールするために用いる
• static 以外の positoin プロパティを併せて指定する必要がある
• 初期値は z-index: auto;
• position: static; 以外の要素には自動的に z-index: auto; が適用される

スタックコンテキスト

• ある条件を満たした要素によって形成される階層構造のこと
  • 自身を基準としたローカルスタックコンテキストを形成する
• 下記の条件で形成される
  • position: relative; もしくは position: absolute; であり、かつ z-index に整数値が設定されているとき
  • position: fixed; もしくは position: sticky;
• ルート要素（HTML要素）はルートスタックコンテキストを形成している
  • つまり、すべての要素は何かしらのスタックコンテキストに属する
• ある要素が同時に複数のスタック文脈に属したり、他のスタック文脈内の要素が任意の要素の間にくることはない

スタックレベル

• スタックコンテキスト内での要素の重なり順のこと
• 要素の重なり順は各スタックコンテキスト内で決まる
• 別のスタックコンテキストにある要素同士の重なり順をコントロールすることはできない
• 同スタックコンテキストに属し、かつ同スタックレベルをもつ場合は、後から書いたものが上に配置される

z-index: auto; と z-index: 0; の違い

• z-index: auto; を指定した要素のスタックレベルは0となる
• z-index: auto; の場合はスタックコンテキストは形成されない（親コンテキストの一部とみなされる）
• z-index: 0; の場合はスタックコンテキストが形成される

For example

• 下記の例の場合、要素のレベルは上から A → B-1 → B-2 → B となる
  • 4つの要素のうち B-1 の z-index が最も大きいが、 A より上にくることはない
  • A と B のスタックコンテキストが異なるからである
  • B は B-2 よりも z-index の値が大きいが、自身がローカルスタックコンテキストの基準となってしまっているため、子要素である B-2 の上にくることはできない

HTML
┣ A (z-index: 5;)
┗ B (z-index: 4;)
　┣ B-1 (z-index: 10;)
　┗ B-2 (z-index: 2;)

参考

• CodeGrid
• 要素の重なりについて本気出して考えてみた（z-indexとか何とかとか）