Набирающее популярность понятие CSS4, на самом деле, взялось из ниоткуда, точно так же, как мы в своё время привыкали к реальности CSS3, который-таки будет с нами ещё некоторое время (на самом деле ещё долгое время). Производители браузеров прилагают огромные усилия для реализации передовых функций стандарта, а «фронтэндщики» (фронтэндеры?) создают новые и новые инструменты для более эффективной работы с таблицами стилей. Но сейчас, слыша о CSS4, вы думаете: «Эй, а что там насчет CSS3? Он ещё жив?»

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

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

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