z-indexとスタック文脈

重なり順の制御をしているときに、スタック文脈というものを理解していなかったことに気づきました。 以下の記事がわかりやすかったです。MDNにはいつもお世話になります。ありがたい。

CSS の z-index の理解 - CSS | MDN

1. z-index なしのスタック : デフォルトのスタック規則
2. スタックとフロート : フロート要素の扱われ方
   • フロート（浮遊）ブロックでは、積み重ね順が少し違います。フロートブロックは位置指定されていないブロックとされているブロックの間に置かれます:
     1. ルート要素の背景とボーダー
     2. 通常フローに乗る子孫要素。HTML 内の出現順
     3. 浮遊ブロック
     4. 通常フローに乗るインラインの子孫要素
     5. 位置指定された子孫要素。HTML 内の出現順
3. z-indexの追加 : z-index を使ってデフォルトのスタックを変える
4. スタックの文脈 : スタック文脈についての覚書
   • スタック文脈の内部で、子要素は前に説明したルールに従って積み重なります。重要なのは、子要素の z-index 値は、その親要素に対してのみ意味を持つということです。スタック文脈は、その親のスタック文脈では不可分な一つの固まりとして扱われます。
5. スタック文脈の例 1 : 2レベルの HTML 階層構造、最終レベルで z-index を使う
6. スタック文脈の例 2 : 2レベルの HTML 階層構造、すべてのレベルで z-index を使う
7. スタック文脈の例 3 : 3レベルの HTML 階層構造、2番めのレベルで z-index を使う