CSS 中重叠元素的默认规则是什么？
What are the default rules for overlapping elements in CSS?
我正在尝试通过 w3schools 自学 html 和 CSS，其中提到如果未指定 z-values，则位于 [=23] 中最后的元素=] 代码将显示在顶部。但是，在their example中，如果我们注释掉图片的z-index，指定none，图片仍然显示在最上面。从下到上的顺序不应该是标题，然后是图像，然后是段落，因为这是它们在代码中指定的顺序？是否应用了我不知道的特殊重叠规则？
P.S。我发现 this question，它引用了另一个出现在文本顶部的图像实例，即使文本在 html 中排在最后，但没有给出这种行为的原因（相反，只有正确的 z-index 推荐代码）。但是，我想知道为什么会这样，而不是如何使用 z-index.
使文本位于最前面
如果两个元素都有默认的z-index（相当于0），绝对定位的元素会在没有定位的元素之上。
那是因为图片是绝对定位的。来自spec,
Within each stacking context, the following layers are painted in
back-to-front order:
- the background and borders of the element forming the stacking context.
- the child stacking contexts with negative stack levels (most negative first).
- the in-flow, non-inline-level, non-positioned descendants.
- the non-positioned floats.
- the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
- the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
- the child stacking contexts with positive stack levels (least positive first).
如果删除 z-index，图像将在第 6 步绘制在第 3 步的段落和第 5 步的段落文本之前。
这是我刚读完的规范部分：https://www.w3.org/TR/html5/embedded-content-0.html#the-img-element
我对此的解释是，虽然浏览器会从文档的顶部到底部呈现元素，但图像元素的 src 必须在文档加载后接收，因为它显然需要额外的 HTTP 请求。这意味着图像的内容在常规元素之后呈现，因此在不指定 z-index 的情况下，它呈现在顶部。
换句话说，您的浏览器首先通过对服务器的 HTTP 请求接收 HTML 文档。该 HTML 文档有一个带有 src 属性的 <img> 标签，然后它会向服务器发出另一个 HTTP 请求，以获取该图像标签的实际文件。如果没有 z-index 设置，浏览器将简单地在其他元素之上绘制该图像。
这是我最好的猜测。我尝试进行了一些实验，并使用检查器查看图像是否有默认值 z-index，但没有。
编辑：
正如 Oriol 在规范中指出的那样，这解释了 w3schools 示例，以及您链接到的其他代码片段：Image overlapping over div
在那种情况下，<img> 元素看起来是内嵌的，因此会在第 5 步绘制，而 <div> 元素会在第 3 步绘制。
我正在尝试通过 w3schools 自学 html 和 CSS，其中提到如果未指定 z-values，则位于 [=23] 中最后的元素=] 代码将显示在顶部。但是，在their example中，如果我们注释掉图片的z-index，指定none，图片仍然显示在最上面。从下到上的顺序不应该是标题，然后是图像，然后是段落，因为这是它们在代码中指定的顺序？是否应用了我不知道的特殊重叠规则？
P.S。我发现 this question，它引用了另一个出现在文本顶部的图像实例，即使文本在 html 中排在最后，但没有给出这种行为的原因（相反，只有正确的 z-index 推荐代码）。但是，我想知道为什么会这样，而不是如何使用 z-index.
使文本位于最前面如果两个元素都有默认的z-index（相当于0），绝对定位的元素会在没有定位的元素之上。
那是因为图片是绝对定位的。来自spec,
Within each stacking context, the following layers are painted in back-to-front order:
- the background and borders of the element forming the stacking context.
- the child stacking contexts with negative stack levels (most negative first).
- the in-flow, non-inline-level, non-positioned descendants.
- the non-positioned floats.
- the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
- the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
- the child stacking contexts with positive stack levels (least positive first).
如果删除 z-index，图像将在第 6 步绘制在第 3 步的段落和第 5 步的段落文本之前。
这是我刚读完的规范部分：https://www.w3.org/TR/html5/embedded-content-0.html#the-img-element
我对此的解释是，虽然浏览器会从文档的顶部到底部呈现元素，但图像元素的 src 必须在文档加载后接收，因为它显然需要额外的 HTTP 请求。这意味着图像的内容在常规元素之后呈现，因此在不指定 z-index 的情况下，它呈现在顶部。
换句话说，您的浏览器首先通过对服务器的 HTTP 请求接收 HTML 文档。该 HTML 文档有一个带有 src 属性的 <img> 标签，然后它会向服务器发出另一个 HTTP 请求，以获取该图像标签的实际文件。如果没有 z-index 设置，浏览器将简单地在其他元素之上绘制该图像。
这是我最好的猜测。我尝试进行了一些实验，并使用检查器查看图像是否有默认值 z-index，但没有。
编辑：
正如 Oriol 在规范中指出的那样，这解释了 w3schools 示例，以及您链接到的其他代码片段：Image overlapping over div
在那种情况下，<img> 元素看起来是内嵌的，因此会在第 5 步绘制，而 <div> 元素会在第 3 步绘制。