5

给定以下 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，但我只是好奇。

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

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

4

2 回答 2

3

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

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

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

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

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

于 2012-06-20T20:37:31.370 回答
-1

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

“此示例演示了透明度的概念。背景的默认行为是允许其后面的框可见。在示例中，每个框透明地覆盖其下方的框。可以使用现有背景之一覆盖此行为特性”

于 2012-06-20T20:58:45.550 回答