Проблема z-index в том, что многие просто не понимают, как он работает.
Всё, описанное ниже, есть в спецификации W3C. К сожалению, не все её читают.

Описание проблемы:

Итак, пусть у нас есть HTML код, состоящий из 3 <div> элементов.
Каждый из них внутри себя содержит по одному <span>. А каждый <span>, в свою очередь, имеет свой фон: красный, зеленый и синий, соответственно. Плюс ко всему, каждый <span> позиционирован абсолютно левого верхнего края документа таким образом, что он немного перекрывает собой следующий за ним <span>. Первый <span> имеет z-index, равный 1, у остальных двух <span> z-index не задан. Читать дальше →