令人困惑的重叠div的图层顺序与内容和背景颜色

Question

给出以下HTML:

<div class="foo">howdy howdy howdy how</div>
<div class="bar">Hello</div>?

和以下CSS:

.foo {
    background-color:green;
    overflow:hidden;
    height:.75em;
}

.bar {
    color: white;
    background-color: red;
    margin-top: -10px;
    width: 200px;
}

图层顺序是这样的:

这是相关的jsfiddle:http://jsfiddle.net/q3J8D/

我希望红色背景位于黑色文本之上,并且不明白为什么黑色文本位于红色背景之上.

我可以使用修复此问题position: relative,但我只是好奇.

为什么黑色文字位于红色背景之上？

我特别想找到解释这种行为的官方来源/标准.

Answer 1

即使在多次阅读规范以及BoltClock 对链接问题的回答之后，我还是花了一段时间才理解它。

但似乎解释很简单：由于它们是同一堆栈上下文（根上下文）内的两个静态（即非定位）块级元素，因此它们按以下顺序绘制：

• 的背景#foo
• 的背景#bar
• 的文本内容#foo
• 的文本内容#bar

因此，我们在问题中看到的输出。

绘制顺序由CSS 2.1 规范附录 E中描述的算法决定。附录中没有（但在这里提到）的是，该算法递归地应用于每个堆栈上下文（而不是每个元素）。