[pumpernick]

It's a digestible introduction, but in the real world you'll find that there's a lumbering iceberg underneath.

Display, alignment, justification, relative parents, stacking contexts, flow, negative margins, flexbox, transform... all of these interact in... let's say interesting ways, and not consistently across browsers.

I wish CSS positioning could be explained with a few GIFs, but moving outside the playground you quickly realize it can't.

Now that the DOM and JS are mostly solved problems, I'd like to see browser vendors seriously tackle CSS rendering so it can be this simple.

[jordanlev]

Here is the best explanation I've ever seen (a bit more fleshed out than the OP): http://www.barelyfitz.com/screencast/html-training/css/posit...

And here's another good one that is specific to layouts: http://learnlayout.com/display.html

[sandijs]

I totally agree! And half of them are hacks. That scares way too many people away from designing with code!