## Expected behavior of z-indexEdit

- 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

Conclusion: A will display on top of B

## Example 1Edit

- 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.

Expected behavior is that A should display on top of B. And it does! Yay.

A

B

## Example 2Edit

- 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.

Expected behavior is that A should display on top of B. However, that's not what actually happens. Why?

A

B

## Example 3Edit

- 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.

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?

A

B

C

## Why expected behavior isn't what actually happensEdit

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?