If you are using CSS z-index to stack elements on a web page, you will probably have come across what looks like very strange behaviour. You have an element with a z-index of 2, but it is on top of an element that has a much higher z-index, for example 100.
Normally, you would expect a z-index of 2 to appear underneath a z-index of 100, so what gives?
You have discovered Stacking Context!
Stacking Context is actually really useful once you know it exists, but can be a bit confusing if you don’t know about it. The simple explanation is this: If you have nested elements that both use position and z-index, the child elements are within the Stacking Context of the parent element. Like this:
<div style="position: absolute; z-index: 100;">
A
<div style="position: absolute; z-index: 2;">
B
</div>
</div>
<div style="position: absolute; z-index: 90;">
C
</div>
A has a z-index of 100, so it is on top of C, which has a z-index of 90 and is in the same Stacking Context.
B is on top of A and C, because it has a z-index of 2, but is in the Stacking Context of A, so think of it as A + 2, or 100 + 2.
