The drawing order of static elements

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:

1. Box 1's background and border
2. Box 2's background and border
3. Box 1's text
4. Box 2's text

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

Demo