我试图通过w3schools教自己html和CSS，并且它提到如果没有指定z值，那么位于html代码中最后的元素将显示在顶部。但是，在their example中，如果我们注释掉图像的z-index以便没有指定，则图像仍会显示在顶部。不应该从下到上的顺序是标题，然后是图像，然后是段落，因为这是它们在代码中指定的顺序？是否应用了我不知道的特殊重叠规则？
P.S。我发现了this question，它引用了出现在文本顶部的另一个图像实例，即使文本在html中排在最后，但没有给出这种行为的理由（相反，只推荐使用正确的z-index代码） 。但是，我想知道为什么会发生这种情况，而不是如何使用z-index使文本成为最佳。
答案 0 :(得分：3)
那是因为图像绝对定位。来自spec，
在每个堆叠上下文中，绘制了以下图层 从前到后的订单：
- 构成堆叠背景的元素的背景和边框。
- 子堆叠上下文具有负堆栈级别（最多为负数）。
- 流入的，非内联级别，未定位的后代。
- 未定位的花车。
- in-flow，内联级别，非定位后代，包括内联表和内联块。
- 堆叠级别为0的子堆叠上下文和堆栈级别为0的已定位后代。
- 具有正堆栈级别的子堆叠上下文（最少积极的第一个）。
如果您删除了z-index，则会在步骤3的段落前面的步骤6和步骤5中的段落文本中绘制图像。
答案 1 :(得分：1)
如果两个元素都有默认的z-index（相当于0），那么绝对定位的元素将位于没有定位集的元素之上。
答案 2 :(得分：0)
以下是我刚刚阅读的规范部分：https://www.w3.org/TR/html5/embedded-content-0.html#the-img-element
我对此的解释是，虽然浏览器会将文档顶部的元素渲染到底部，但是文档加载后必须接收图像元素的src，因为它显然需要额外的HTTP请求。这意味着图像的内容在常规元素之后呈现，因此在没有指定z-index的情况下，它呈现在顶部。
换句话说，您的浏览器首先通过HTTP请求向服务器接收HTML文档。该HTML文档具有<img>标记，其src属性，然后针对该图像标记的实际文件向服务器发出另一个HTTP请求。如果没有设置z-index，浏览器只会在其他元素之上绘制该图像。
这是我最好的猜测。我尝试使用一些实验并使用检查器查看图像上是否有默认的z-index，但是没有。
编辑：
正如Oriol在规范中所指出的，这解释了w3schools示例，以及您链接到的其他代码段：Image overlapping over div
在这种情况下，看起来<img>元素将是内嵌的，因此将在步骤5中绘制，而<div> s将在步骤3中绘制。