Z-index

Expected behavior of z-index
Conclusion: A will display on top of B
 * Let A and B be two positioned (using either absolute, relative or fixed positioning) elements in the document.
 * Suppose that z-index of A > z-index of B

Example 1
Expected behavior is that A should display on top of B. And it does! Yay.
 * Let A (red) be a div and let B (green) be a sibling of A.
 * Let z-index of A = 2 and z-index of B = 1.

A B

Example 2
Expected behavior is that A should display on top of B. However, that's not what actually happens. Why?
 * Let A (red) be a div and let B (green) be a child node of A.
 * Let z-index of A = 2 and z-index of B = 1.

AB

Example 3
Expected behavior is for the sibling C to be in the layer between A and B. However, that's not what actually happens. In fact, C is on top of B despite the fact that B has a higher z-index. Why? AB C
 * Let A (red) be a div and let B (green) be a child node of A.
 * Let C (teal) be a sibling of A.
 * Let the z-indicies be as follows: A = 1, B = 3, C = 2.

Why expected behavior isn't what actually happens
There isn't just a single z-axis specifying which order the elements are painted onto the canvas. In fact, there are these confusing things called stacking contexts and the whole algorithm is extremely convoluted. Who the heck invented z-indexing and why is it so complicated?
 * http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index