CSS定位布局模块 第4级

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

元素 el 被认为在顶层中， 如果 el 被其 包含在其 节点文档的 顶层 且未被包含在其 节点文档的 待移除顶层元素中。

注意：规范在操作顶层本身时应使用此概念， 而不是 在顶层渲染。 使用这个概念可以避免行为因是否有 overlay 过渡， 或两个操作是在渲染更新之间还是跨渲染更新发生而不同。

元素 el 被认为在顶层渲染， 如果 el 被其 节点文档的 顶层包含， 并且 el 具有 overlay: auto。

注意：规范在响应“显示在所有内容之上”的渲染行为时应使用此概念， 而不是 在顶层中。 例如，是否存在 ::backdrop 伪元素 取决于元素是否 在顶层渲染； 即使元素 待移除， 只要它仍显示在最上层，就会有 ::backdrop。

要将元素添加到顶层， 给定一个 Element el：

1. 令 doc 为 el 的 节点文档。

2. 如果 el 已经被 包含 在 doc 的 顶层中：

   • 断言：el 也在 doc 的 待移除顶层元素中。 （否则，这是规范错误。）

   • 从 doc 的 顶层 和 待移除顶层元素中移除 el。

3. 将 el 添加到 doc 的 顶层。

4. 在 UA !important 级联源， 添加一条针对 el 的规则， 包含 overlay: auto 声明。

要请求将元素从顶层移除， 给定一个 Element el：

1. 令 doc 为 el 的 节点文档。

2. 如果 el 未被 包含 在 doc 的 顶层中， 或 el 已被包含在 待移除顶层元素中， 则返回。

3. 移除 UA !important 针对 el 的 overlay: auto 规则。

4. 将 el 添加到 doc 的 待移除顶层元素。

要立即将元素从顶层移除， 给定一个 Element el：

1. 令 doc 为 el 的 节点文档。

2. 从 doc 的 顶层和 待移除顶层元素中移除 el。

3. 移除 UA !important 针对 el 的 overlay: auto 规则（如果存在）。

注意：此算法仅用于特殊场景， 例如需要立即将内容从顶层移除（绕过如 overlay 过渡）时， 比如模态对话框被从文档中移除。 大多数情况下，使用 请求移除顶层更合适。

要处理顶层移除， 给定一个 Document doc：

1. 对于 doc 的 待移除顶层元素 中的每个元素 el： 如果 el 的 overlay 计算值为 none， 或 el 未渲染， 立即将元素从顶层移除 el。

注意：此操作应在 HTML 渲染算法的“更新渲染”步骤期间调用。 不应由其他算法调用。

注意：overlay 的检查可以被作者级动画任意延迟； 详情见 § 3.4 控制顶层：overlay 属性。

* { overlay: none !important; }

             |     |         |
             |          |    |   ⇦ 🧑‍🎨
             |          |        用户
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 上， 背景定位区的原点为 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 不是根元素的 主盒， 则将其背景绘制到 canvas。

   2. 将 root 的边框绘制到 canvas。

2. 如果 root 是表包装盒：

   1. 如果 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 是内联盒

   对所有 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 视为创建了一个新的堆叠上下文， 但忽略所有定位后代 或实际创建了堆叠上下文的后代 （让父堆叠上下文绘制它们）。