Confusing Layer Order Of Overlapping Divs With Content And Background Colors
Solution 1:
It took me a while to understand it, even after reading thespec multiple times, and BoltClock's answer to the linked question.
But it seems the explanation is simple: since these are two static (i.e. non-positioned), block-level elements inside the same stacking context (the root context), they are drawn in the following order:
- background of
#foo - background of
#bar - text content of
#foo - text content of
#bar
Thus, the output we see in the question.
The paint order is dictated by an algorithm described in Appendix E of the CSS 2.1 spec. What is not in the appendix (but is mentioned here), is that the algorithm is applied recursively for each stacking context (not each element).
Solution 2:
http://www.w3.org/TR/CSS21/visuren.html#z-index
"This example demonstrates the notion of transparency. The default behavior of the background is to allow boxes behind it to be visible. In the example, each box transparently overlays the boxes below it. This behavior can be overridden by using one of the existing background properties"
Post a Comment for "Confusing Layer Order Of Overlapping Divs With Content And Background Colors"