html - 混淆重叠 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

我花了一段时间才理解它，即使在阅读之后也是如此 the spec多次，和BoltClock's answer到 linked question .

但似乎解释很简单:因为这是两个静态的(即非定位的) block 级元素，位于相同的堆栈上下文(根上下文)中，所以它们被绘制在以下顺序:

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

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

绘制顺序由 Appendix E 中描述的算法决定CSS 2.1规范。附录中没有(但提到了 here )的是算法递归应用每个堆叠上下文(不是每个元素)。