CSS位置レイアウトモジュール レベル4

::backdrop {
  position: fixed;
  inset: 0;
}

要素 el が トップレイヤー内であるとは、 el が自身の ノード文書の トップレイヤー に 含まれているが、 かつ自身の ノード文書の トップレイヤー削除待ちには 含まれていない場合を指します。

注: 仕様は、トップレイヤー自体を操作する場合は トップレイヤーで描画されるよりもこの概念を使うべきです。 この概念を使うことで、overlayのトランジションがあるかどうかや、 2つの操作が描画更新の間で起こったか、跨いで起こったかによる動作の違いを避けられます。

要素 el が トップレイヤーで描画されるとは、 el が自身の ノード文書の トップレイヤーに 含まれていて、 かつ el の overlay: auto である場合です。

注: 仕様は、トップレイヤー自体を操作しない場合、 つまり「すべての上に描画される」挙動に応答する場合は トップレイヤー内よりも この概念を使うべきです。 例えば、::backdrop疑似要素の存在は、 要素がトップレイヤーで描画されるかどうかに依存します。 要素が削除待ちであっても、 表示中であれば::backdropを持ちます。

要素をトップレイヤーに追加するには、 Element elを与え：

1. doc を el の ノード文書とする。

2. もし el が既に doc の トップレイヤーに 含まれている場合：

   • アサート: el は doc の トップレイヤー削除待ちにも含まれている。 （そうでない場合は仕様のエラーです。）

   • 削除 el を doc の トップレイヤー と トップレイヤー削除待ちから。

3. 追加 el を doc の トップレイヤーへ。

4. UA !important カスケード起点で、 elを対象とした overlay: auto 宣言を含むルールを追加する。

要素のトップレイヤーからの削除を要求するには、 Element elを与え：

1. doc を el の ノード文書とする。

2. もし el が doc の トップレイヤーに 含まれていない か、または el が既に トップレイヤー削除待ちに 含まれている場合は、終了する。

3. UA !important の overlay: auto ルールで el を対象としたものを削除する。

4. 追加 el を doc の トップレイヤー削除待ちへ。

要素を即座にトップレイヤーから削除するには、 Element elを与え：

1. doc を el の ノード文書とする。

2. 削除 el を doc の トップレイヤーと トップレイヤー削除待ちから。

3. UA !important の overlay: auto ルールで el を対象としたものを削除する（存在する場合）。

注: このアルゴリズムは、 overlayのトランジション等をバイパスして 何かを即座にトップレイヤーから削除する必要がある特殊なケース （例：文書から削除されるモーダルダイアログ）でのみ使用することを意図します。 通常は、トップレイヤーからの削除要求の方が適切です。

トップレイヤー削除の処理には、 Document docを与え：

1. doc の トップレイヤー削除待ち内の 各要素 el について、 el の overlay の算出値が noneであるか、 el が非描画の場合、 即座にトップレイヤーから削除する el。

注: これはHTMLの描画アルゴリズムの「レンダリング更新」ステップで呼ばれることを想定しています。 他のアルゴリズムから呼ぶことは意図されていません。

注: overlayの判定は 著者レベルのトランジションによって任意の長さ遅延可能です。 詳細は § 3.4 トップレイヤーの制御：overlayプロパティ を参照してください。

* { overlay: none !important; }

             |     |         |
             |          |    |   ⇦ 🧑‍🎨
             |          |        user
z-index:  canvas  -1    0    1

文書docと無限キャンバスcanvasについて、文書を描画するには：

1. スタッキングコンテキストを描画する（docのルート要素とcanvasを与える）。

2. docのトップレイヤー内の各要素elについて：

   1. スタッキングコンテキストを描画する （elの::backdrop疑似要素とcanvasを与える）。

   2. スタッキングコンテキストを描画する（elとcanvasを与え、 elをスタッキングコンテキストとして扱い、 初期包含ブロックを包含ブロックとする）。

要素、疑似要素、 またはボックス rootと無限キャンバスcanvasについて、スタッキングコンテキストを描画するには：

1. もしrootが要素なら、 スタッキングコンテキストを描画する（rootの主ボックスとcanvasを与える）を実行し、戻る。

2. アサート: rootはボックスであり、 スタッキングコンテキストを生成する。

3. もしrootがルート要素の 主ボックスなら、 rootの背景をキャンバス全体に描画し、 背景の配置領域の原点はcanvas上の、 rootの背景が通常描画される場合の位置とする。

4. もしrootがブロックレベルボックスなら、 ブロックの装飾を描画する（rootとcanvasを与える）。

5. rootの負（ゼロ以外）のz-index値を持つ位置指定子孫について、 それらをz-index順（最も負が最初）、 次にツリー順序で並べ、 各子孫ごとにスタッキングコンテキストを描画する（子孫とcanvas）を実行する。

6. rootのインフローかつ非位置指定かつブロックレベルの子孫について、 ツリー順序で、 ブロックの装飾を描画する（子孫とcanvas）を実行する。

7. rootの非位置指定の浮動子孫について、 ツリー順序で、 スタッキングコンテナを描画する （子孫とcanvasを与える）を実行する。

8. もしrootがインラインレベルボックスなら

   rootが属する各ラインボックスについて、 ラインボックス内のボックスを描画する （root、ラインボックス、canvasを与える）。

   それ以外の場合

   まずrootについて、 その後、インフローかつ非位置指定かつブロックレベルの子孫ボックス全てについて、 ツリー順序で：

   1. もしそのボックスが置換要素なら、 置換コンテンツをcanvasへ原子的に描画する。

   2. それ以外の場合、各ラインボックスについて、 ラインボックス内のボックスを描画する （ボックス、ラインボックス、canvasを与える）。

   3. UAがインバンドアウトラインを使う場合、 ボックスのアウトラインを canvasへ描画する。

9. rootの位置指定子孫で z-index: autoまたはz-index: 0の場合、 ツリー順序で：

   子孫がz-index: autoの場合

   スタッキングコンテナを描画する （子孫とcanvas）を実行する。

   子孫がz-index: 0の場合

   スタッキングコンテキストを描画する （子孫とcanvas）を実行する。

10. rootの位置指定子孫で 正（ゼロ以外）のz-index値を持つものについて、 それらをz-index順（最小が最初）、 次にツリー順序で並べ、 各子孫ごとにスタッキングコンテキストを描画する（子孫とcanvas）を実行する。

11. UAがアウトオブバンドアウトラインを使う場合、 rootの全アウトライン （このアルゴリズムの今回の呼び出しでインバンドアウトラインを使わなかったため描画しなかったもの）を canvasへ描画する。

ブロックボックスrootとキャンバスcanvasについて、ブロックの装飾を描画するには：

1. もしrootがテーブルラッパーボックスでない場合：

   1. もしrootがルート要素の主ボックスでない場合、 rootの背景をcanvasへ描画する。

   2. rootの枠線をcanvasへ描画する。

2. もしrootがテーブルラッパーボックスの場合：

   1. もしrootがルート要素の主ボックスでない場合、 rootの背景をcanvasへ描画する。

   2. rootの各カラムグループについてツリー順序で、 カラムグループの背景をcanvasへ描画する。

   3. rootの各カラムについてツリー順序で、 カラムの背景をcanvasへ描画する。

   4. rootの各行グループについてツリー順序で、 行グループの背景をcanvasへ描画する。

   5. rootの各行についてツリー順序で、 行の背景をcanvasへ描画する。

   6. rootの各セルについてツリー順序で、 セルの背景をcanvasへ描画する。

   7. rootの全テーブル要素の枠線を描画する。 枠線が分離されている場合は ツリー順序で描画し、 一体化されている場合は[css-tables-3]で指定された通りに描画する。

ボックスroot、ラインボックスline box、キャンバスcanvasについて、ラインボックス内のボックスを描画するには：

1. rootのフラグメントでline box内にあるものの背景をcanvasへ描画する。

2. rootのフラグメントでline box内にあるものの枠線をcanvasへ描画する。

3. もしrootがインラインボックスなら

   インフローかつ非位置指定かつインラインレベルの子で、line box内にフラグメントを生成するもの、 およびline box内にフラグメントを生成する 子テキストシーケンス全てについて、 ツリー順序で：

   この子がテキストシーケンスなら：

   1. テキストに影響する下線を、 下線を適用する要素のツリー順序で（最も深い要素の下線が最上に、ルート要素の下線が最下に）、 canvasへ描画する。

   2. テキストに影響する上線を、 上線を適用する要素のツリー順序で（最も深い要素の上線が最上に、ルート要素の上線が最下に）、 canvasへ描画する。

   3. テキストをcanvasへ描画する。

   4. テキストに影響する取り消し線（ラインスルー）を、 ラインスルーを適用する要素のツリー順序で（最も深い要素のラインスルーが最上に、ルート要素のラインスルーが最下に）、 canvasへ描画する。

   この子がボックスなら：

   ラインボックス内のボックスを描画する （子、line box、canvasを与える）。

   もしrootがインラインレベルのブロック またはテーブルラッパーボックスなら

   スタッキングコンテナを描画する （rootとcanvasを与える）。

   もしrootがインラインレベルの置換要素なら

   置換コンテンツをcanvasへ原子的に描画する。

4. UAがインバンドアウトラインを使う場合、 rootのフラグメントでline box内にあるもののアウトラインをcanvasへ描画する。

注: インラインボックスのフラグメントの視覚順序は 双方向並べ替えにより 行内で並び替えられることがあっても、フラグメントはツリー順序で描画されます。

ボックスrootとキャンバスcanvasについて、スタッキングコンテナを描画するには：

1. スタッキングコンテキストを描画する（rootとcanvasを与え、 rootが新しいスタッキングコンテキストを作成するかのように扱うが、 位置指定子孫や実際にスタッキングコンテキストを作成する子孫は除外する （親スタッキングコンテキストがそれらを描画する）。