FANDOM


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?

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.