trật tự lớp Confusing chồng chéo divs với nội dung và màu nền

Question

Với HTML sau:

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

và CSS sau đây:

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

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

Trình tự lớp là một cái gì đó như thế này:

Đây là liên kết jsfiddle: http://jsfiddle.net/q3J8D/

Tôi cho rằng nền màu đỏ nằm trên đầu văn bản màu đen và không hiểu tại sao văn bản màu đen ở trên nền đỏ.

Tôi có thể khắc phục vấn đề này bằng cách sử dụng position: relative, nhưng tôi chỉ tò mò.

Tại sao văn bản màu đen ở trên nền đỏ?

Tôi đặc biệt đang tìm kiếm nguồn chính thức/tiêu chuẩn giải thích hành vi này.

Answer 1

Mất một lúc để hiểu nó, ngay cả sau khi đọc thespec nhiều lần và BoltClock's answer đến linked question.

Nhưng có vẻ như những lời giải thích rất đơn giản: vì đây là hai tĩnh (tức là không ở vị trí), các yếu tố khối cấp bên trong cùng bối cảnh xếp chồng (bối cảnh gốc), họ được rút ra theo trình tự sau:

• nền của #foo
• nền của #bar
• nội dung văn bản của #foo
• nội dung văn bản của #bar

Vì vậy, đầu ra chúng ta thấy trong câu hỏi.

Thứ tự sơn được quyết định bởi thuật toán được mô tả trong Appendix E của thông số CSS 2.1. Những gì không có trong phụ lục (nhưng được đề cập là here), là thuật toán được áp dụng đệ quy cho mỗi ngữ cảnh xếp chồng (không phải mỗi phần tử ).

Answer 2

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

"Ví dụ này cho thấy khái niệm về tính minh bạch. Hành vi mặc định của nền là để cho phép hộp đằng sau nó để được hiển thị. Trong ví dụ này, mỗi hộp trong suốt chồng lên hộp dưới nó. Đây hành vi có thể bị ghi đè bằng cách sử dụng một trong các thuộc tính nền hiện tại "