How z-index Works
Having trouble with your z-index stacking? This straight forward explanation about stacking context might help clear a few things up
Although it may not be immediately obvious, the elements in an HTML document are generated in three dimensions. Besides being aligned on the x- and y- axes, elements can lie on the z-axis, which controls their position in the third dimension.
An excerpt from How z-index Works
