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

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

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

Ниже представлен HTML код с базовым css оформлением.

.red, .green, .blue { position: absolute; } .red { background: red; z-index: 1; } .green { background: green; } .blue { background: blue; }
Пример на jsfiddle

Задача: сделать так, чтобы красный был позади синего и зеленого, при этом не нарушая ни одно из следующих правил:

• Нельзя менять HTML разметку
• Нельзя менять/добавлять z-index к элементам
• Нельзя менять/добавлять позиционирование к элементам

Решение:

Решение состоит в том, чтобы добавить прозрачность чуть меньше единицы первому (родителю красного).
Вот css, иллюстрирующий это:
div:first-child { opacity: .99; }

Хм, что-то тут не так. Причем тут вообще прозрачность? Каким образом она может влиять на порядок перекрытия элементов? Вы думаете так же? Добро пожаловать в клуб!
Надеюсь, во второй части статьи всё встанет на свои места.

Порядок наложения элементов:

Z-index кажется очень простым: чем значение больше, тем ближе к нам будет элемент, т.е. элемент с z-index 5 будет перекрывать собой элемент с z-index 2, верно? На самом деле нет.
Это и есть проблема z-index. Всё кажется настолько очевидным, что большинство разработчиков не уделяют достаточно времени для изучения этого вопроса.

Любой элемент в HTML документе может быть либо на переднем, либо на заднем плане. Это известно всем. Правила, задающие этот порядок четко описаны в спецификации, но, как я уже говорил выше, не все в полной мере их понимают.

Если свойства z-index и позиционирование не заданы явно, всё просто: порядок наложения равен порядку следования элементов в HTML. (На самом деле всё немного сложнее , но пока вы не будете использовать отрицательные значения отступов для перекрытия строчных элементов, вы не будете сталкиваться с крайними случаями)

Если вы явно указываете позиционирование элементам (и их детям), то такие элементы будут перекрывать собой элементы без явно заданного свойства позиционирования. (Говоря «явно указываете позиционирование» – я имею ввиду любое значение, кроме статического, например: абсолютное, или относительное).

И наконец, случай, когда z-index задан. Для начала, вполне естественно предполагать, что элементы с большим z-index будут находиться выше элементов с меньшим z-index, а любой элемент с установленным z-index будет находится выше элемента без установленного z-index, но это не так. Во первых, z-index учитывается только на явно позиционированных элементах. Если вы попробуете установить z-index на не позиционированный элемент, то ничего не произойдет. Во вторых, значения z-index могут создавать контексты наложения. Хм, всё стало намного сложнее, не так ли?

Контекст наложения

Элементы с общими родителями, перемещающиеся на передний или задний план вместе известны как контекст наложения. Понимание контекста наложения является ключом к пониманию z-index и порядка наложения элементов.

Каждый контекст наложения имеет свой корневой элемент в HTML структуре. В момент формирования нового контекста на элементе, все дочерние элементы так же попадают в этот контекст и занимают своё место в порядке наложения. Если элемент располагается в самом низу одного контекста наложения, то никаким мыслимым и немыслимым образом не получится отобразить его над другим элементом в соседнем контексте наложения, располагающимся выше по иерархии, даже с установленным z-index равным миллиону.

Новый контекст может быть сформирован в следующих случаях:

• Если элемент – корневой элемент документа (элемент)
  Если элемент позиционирован не статически и его значение z-index не равно auto
  Если элемент имеет прозрачность менее 1

z-index

Свойство CSS z-index определяет порядок элементов, когда они накладываются друг на друга при позиционировании. То есть с помощью него можно указать, какой элемент (слой) будет находиться сверху, а какие (и в каком порядке) под ним.

Но тут не все так просто. Это свойство является в CSS одним из тех немногих, которые осуществляют сразу две совершенно разные функции (как, например, position):

1. Свойство z-index служит для упорядочивания позиционированных элементов.
2. Каждый элемент с z-index не равным auto создает новый уровень упорядочивания, относительно которого оно (упорядочивание) и происходит для всех его потомков (естественно потомки, у которых z-index не равно auto создают уже свой уровень упорядочивания). Именно поэтому, например, элемент из одного уровня упорядочивания невозможно «положить» между двумя элементами из другого.
3. Корневой элемент создает корневой уровень упорядочивания, даже, если у него не указан z-index .

Давайте рассмотрим такой пример:

В этом примере при любых числовых значениях z-index у вас получится поменять местами только DIV3 и DIV4. А вот не получится следующее:

1. Не получится положить DIV3 и DIV4 под DIV2, так как они находятся на разных уровнях упорядочивания. DIV2 на уровне созданном элементом DIV1, а DIV3 и DIV4 на уровне созданном DIV2. Чтобы они были на одном уровне надо убрать z-index у DIV2 или установить его в auto .
2. Не получится положить DIV2 под DIV1. Чтобы получилось надо установить auto уже у DIV1.
3. И так далее...

В разных учебниках и справочниках понятие «Уровень упорядочивания» называют по разному - локальный позиционный контекст, локальный контекст стека и т.д. В официальной спецификации CSS оно пишется так - «local stacking context». Но на мой взгляд словосочетание «уровень упорядочивания» ближе к пониманию для большинства русскоговорящих людей, поэтому я и ввел это определение.

Тип свойства

Назначение: позиционирование .

Применяется: к элементам с position отличным от static.

Наследуется: нет.

Значения

Значением свойства z-index является указание порядка элементов одним из следующих способов.

• Число - любое целое положительное или отрицательное число, задающее порядок элементов внутри данного уровня упорядочивания. Элемент с бОльшим значением будет расположен поверх тех, у которых оно меньше. Если у двух элементов имеются одинаковые значения, то сверху будет тот, который находится ниже в HTML-коде. Кроме этого, элемент, имеющий числовое значение (в том числе и 0) создает новый уровень упорядочивания для своих позиционированных потомков.
• auto - при этом значении у элемента в текущем уровне упорядочивания такой же z-index , как и у его предка, который этот уровень создал. При этом сам элемент не создает новый уровень упорядочивания для своих потомков. Если есть несколько элементов с данным значением, то сверху будет тот, который стоит ниже в HTML-коде страницы.
• inherit - наследует значение z-index от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: auto.

Так как внутри элемента создающего уровень упорядочивания могут быть не только позиционированные элементы, но и какие-то другие, то браузеры используют определенный правила их наслоения в пределах данного уровня:

1. Первым слоем укладывается фон и рамка элемента, который создал данный уровень упорядочивания.
2. Сверху, вторым слоем, укладываются элементы-потомки, имеющие отрицательные значения z-index , где выше оказывается элемент со значением ближе к нулю.
3. Следующим слоем идут элементы-потомки, которые не являются встроенными (inline).
4. Четвертым слоем идут плавающие элементы (float) вместе со своим содержимым.
5. Пятый слой - это встроенные элементы-потомки.
6. Шестым слоем укладываются элементы с z-index auto или 0, где выше оказывается элемент стоящий ниже в коде.
7. И, наконец, на самом верху располагаются элементы с положительными значениями z-index , где выше оказывается элемент, имеющий большее значение.

Синтаксис

z-index: auto | число | inherit

Пример CSS: использование z-index

Результат.

Версии CSS

Версия:	CSS 1	CSS 2	CSS 2.1	CSS 3
Поддержка:	Да	Да	Да	Да

Браузеры

Браузер:	Internet Explorer		Google Chrome	Mozilla Firefox		Opera
Версия:	6.0 и 7.0	8.0 и выше	2.0 и выше	2.0	3.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Частично	Да	Да	Частично	Да	Да	Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit . Также в этих браузерах новые уровни упорядочивания создают вообще все позиционированные элементы, а не только имеющие числовые значения z-index .

IE 6.0 всегда располагает элемент поверх всех элементов страницы, невзирая на значения z-index .

Firefox 2.0 укладывает элементы с отрицательными значениями z-index под фон и рамку элемента, который создал данный уровень упорядочивания. Другими словами он меняет местами пункты 1 и 2 в правилах наслоения.

Z-index: auto |

z-index не работает с position: static; . Значения relative , absolute и fixed равнозначны

Пример: зелёный с z-index: 2; находится под красным z-index: 1; только когда имеет значение по умолчанию.

z-index: 2; static relative absolute fixed

z-index: 1; static relative absolute fixed

z-index: 2;

z-index: 1;

Если у соседних элементов одинаковое значение z-index , то нижние в коде теги показаны над верхними

[Пример интерактивный, следует переключать кнопки]

• красный:
• синий:
• зелёный:

У дочернего элемента родителя, имеющего z-index не auto и position , отличный от static , z-index предка можно представить целым числом, очерёдность предка — десятичным, а z-index потомка сотым

• красный:
• синий:
• зелёный:

Отрицательный z-index перемещает элемент перед background , border , box-shadow контекста наложения

Вложенные элементы отображаются над родителем. Единственный способ поместить дочерний тег ниже родителя — присвоить ему отрицательный z-index .

• контекст наложения:

Примеры использования:

z-index и opacity

Рассматриваются как z-index: 0; . Если дополнительно задать position не static и z-index не auto , то положение измениться в соответствии с последними свойствами CSS.

• красный:
• синий:
• зелёный:

1. Если можно не использовать z-index , то лучше его не использовать и, например, сразу в HTML коде разместить теги в требуемом порядке.
2. Если z-index всё же нужен, скажем, для выпадающего меню, то значений 0 , 1 , 2 , 3 , 4 , 5 вполне достаточно в большинстве случаев, не нужно переходить на десятки, а то и сотни.
3. Если z-index не работает, то нужно подняться вверх по дереву DOM, чтобы понять где контекст наложения.

Примечание: IE 6-7 рассматривает значение auto как 0 и всем position не static создаёт контекст наложения.

Свойство z-index управляет порядком наложения позиционированных элементов в случае, когда они накладываются друг на друга. Свойство принимает целые положительные и отрицательные значения.

В нормальном потоке position: static элементы располагаются последовательно один за другим в том порядке, в котором они определены в html-документе. По умолчанию установлен z-index: auto; .

Рис. 1. Позиционирование элементов вдоль оси Z

Свойство z-index задает порядок расположения элементов вдоль оси Z. В обычной ситуации элементы с высоким значением индекса будут перекрывать элементы с меньшим значением и значением auto , располагаясь на переднем плане.

Рис. 2. Воздействие свойства z-index на позиционированные элементы

Контекст наложения

Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде. Если для элементов не задан z-index , браузер отображает элементы на странице в следующем порядке:

Корневой элемент

Позиционированные position элементы в порядке их следования в исходном коде. Последний из них будет расположен на переднем плане.

Рис. 3. Порядок расположения элементов в 3D пространстве по умолчанию

Как видно из рисунка, элемент с position: absolute; находится на переднем плане, далее идет текст, под ним располагаются плавающие элементы с float: left; , не позиционированные блочные элементы расположены на заднем плане (так как плавающие и позиционированные элементы удаляются из потока, то блочные не позиционированные элементы их игнорируют и располагаются друг за другом, в соответствии с разметкой, поэтому элемент