重叠 div 的图层顺序与内容和背景颜色混淆答案

【问题标题】：Confusing layer order of overlapping divs with content and background colors重叠 div 的图层顺序与内容和背景颜色混淆
【发布时间】：2012-06-20 20:32:30
【问题描述】：

给定以下 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 解决这个问题，但我只是好奇。

为什么红色背景上面是黑色文字？

我特别在寻找解释这种行为的官方来源/标准。

【问题讨论】：

发生在 Chrome 中，但不在 Firefox 中。但不知道为什么。
有点类似这个：stackoverflow.com/questions/11088176/…
@bfavaretto：我在所有浏览器的最新版本中都能看到它。
@BoltClock 现在我也是。我可能将更新的/2 jsfiddle url（带有position:relative）粘贴到 Firefox 中。哦，好吧。

标签： html css

【解决方案1】：

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

但似乎解释很简单：因为它们是 相同的堆叠上下文（根上下文）内的两个静态（即非定位）块级元素，它们被绘制在以下顺序：

#foo的背景
#bar的背景
#foo的文字内容
#bar的文字内容

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

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

【讨论】：

根堆叠上下文是html，而不是body。除此之外，你基本上明白了。做得很好:)
@BoltClock 所以body 也在创建一个新的堆叠上下文？我以为不是。顺便说一句：对不起，如果我浪费你的时间寻求帮助。我对这个问题有些着迷。我回答中的最后一句话解释了我所有困惑的根源。
body 不会创建新的堆叠上下文，但作为html 的子级，它会绘制在html 之上，然后是两个divs。我想该评论是为了澄清 OP 和其他读者，最重要的是。不用担心，不用浪费时间 - 我想你无论如何都在努力。
另请注意，“文本内容”相对于算法表示为匿名内联框。
是的，这就是我迷路的地方：步骤7.2.1.4.1.1 :)。感谢您的编辑。

【解决方案2】：

http://www.w3.org/TR/CSS21/visuren.html#z-index

“这个例子演示了透明度的概念。背景的默认行为是允许它后面的框可见。在这个例子中，每个框透明地覆盖在它下面的框上。这个行为可以通过使用以下之一来覆盖现有的背景属性”

【讨论】：

... 用于示例代码。这里没有透明度。