One important thing to keep in mind while working with z-index is that multiple stacking orders are created based on the markup hierarchy. This means that an element with a z-index of 30 can actually appear below an element with a z-index of 20, if the z-index of the original element’s parent is 10.

Paolo Lombardi explains this well in his article on stacking context, and includes this helpful diagram: