Despite working with CSS for years I hadn't encountered this until Paul Lewis showed me one of his demos painting oddly.
Turns out the default painting order is to paint all siblings, then the children of those siblings. In the demo below that means:
This means the elements appear to interleave when they intersect.
This is old news, here's a thread about it on www-style from 2009, but first time I'd encountered it. Of course, as soon as you add
position: relative the elements have defined layering, and box 2 overlaps box 1 and its contents. Interesting!
- Jake Archibald