混淆层顺序

鉴于下面的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; 
}

的层顺序是这样的：

weird layer order

下面是关联的jsfiddle：http://jsfiddle.net/q3J8D/

我期望红色背景位于黑色文本之上，不理解黑色文本为什么位于红色背景之上。

我可以使用position: relative来解决这个问题，但我只是好奇。

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

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

来源

2012-06-20 Jamie Wong

适用于Chrome，但不适用于Firefox。但不知道为什么。 – bfavaretto

有点类似于这个：http：// stackoverflow。com/questions/11088176/before-pseudo-element-stacking-order-issue – thirtydot

@bfavaretto：我在所有浏览器的最新版本中都一致地看到它。 – BoltClock

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

但似乎的原因很简单：因为这些是两个静态（即，非定位），则同一堆叠内容（根上下文）的内部块级元素，它们被吸入的顺序如下：

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

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

画图顺序由CSS 2.1规范的Appendix E中描述的算法规定。什么不在附录（但提到here），是该算法递归应用为每个堆栈上下文（不是每个元素）。

来源

2012-06-20 20:37:31 bfavaretto

根堆栈上下文是'html'，而不是'body'。除此之外，你基本上明白了。做得很好:) – BoltClock

@BoltClock所以'body'也创建了一个新的堆叠环境？我以为不是。顺便说一句：对不起，如果我浪费你的时间寻求帮助。我对这个问题有点痴迷。我答案中的最后一句解释了我所有混乱的根源。 – bfavaretto

'body'不会创建新的堆叠上下文，但是作为'html'的子元素，它被绘制在'html'之上，后面跟着两个'div'。我想这个评论是为了澄清OP和其他读者，而不是任何事情。没有烦恼，没有时间浪费 - 我想你无论如何都在努力。 – BoltClock

-1

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

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

来源

2012-06-20 20:58:45 Tony318

...这些在示例代码中使用。这里没有透明度。 – bfavaretto

回答

相关问题