Verwirrende Schicht, um sich überlappender divs mit Inhalt und Hintergrundfarben

Question

mit dem folgenden HTML:

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

und die folgende CSS:

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

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

Die Schicht, um so etwas wie dieses:

Hier ist die zugehörige jsfiddle: http://jsfiddle.net/q3J8D/

Ich würde erwarten, dass der rote Hintergrund oben auf dem schwarzen Text und nicht verstehen, warum der schwarze Text über dem roten Hintergrund ist.

Ich kann dieses Problem mit position: relative beheben, aber ich bin nur neugierig.

Warum ist der schwarze Text oben auf dem roten Hintergrund?

Ich suche vor allem nach einer offiziellen Quelle/Norm, die dieses Verhalten erklärt.

Answer 1

Es dauerte eine Weile, um es zu verstehen, auch nach thespec mehrfach zu lesen, und BoltClock's answer zum linked question.

Aber es scheint die Erklärung ist einfach: da es sich um zwei statisch (dh nicht positioniert), Block-Level-Elemente innerhalb des gleichen Stapelkontext (das Root-Kontext), sie in der folgenden Reihenfolge gezeichnet werden:

• Hintergrund von #foo
• Hintergrund von #bar
• Textinhalt #foo
• Textinhalt #bar

Also die Ausgabe sehen wir in der Frage.

Die Farbreihenfolge wird von einem Algorithmus vorgegeben, der in Appendix E der Spezifikation CSS 2.1 beschrieben wird. Was nicht im Anhang steht (aber erwähnt wird here), ist, dass der Algorithmus rekursiv für jeden Stapelkontext (nicht jeder Element) angewendet wird.

Answer 2

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

„Dieses Beispiel zeigt den Begriff der Transparenz. Das Standardverhalten des Hintergrunds ist Box dahinter zu ermöglichen, sichtbar zu sein. Im Beispiel jede Box überlagert transparent die Boxen darunter. Diese Das Verhalten kann durch Verwendung einer der vorhandenen Hintergrundeigenschaften außer Kraft gesetzt werden. "