Понимание z-index

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

В CSS 2.1 каждый элемент имеет позицию в трёх измерениях. Помимо горизонтальной и вертикальной позиций, элементы расположены вдоль «z-оси» и форматируются друг над другом. Позиции на z-оси особенно важны, когда элементы визуально перекрываются.

(из CSS 2.1 Раздел 9.9.1 — Многослойное представление)

Это означает, что правила стилей CSS позволяют размещать элементы на слоях помимо стандартного слоя отрисовки (слой 0). Позиция на воображаемой z-оси каждого слоя выражается целым числом, представляющим порядок следования для отрисовки. Большие числа означают, что элемент находится ближе к наблюдателю. Управляйте позицией на этой z-оси с помощью свойства CSS z-index.

Использование z-index кажется невероятно простым: достаточно присвоить свойству одно целое число с понятным поведением. Однако при применении z-index к сложным иерархиям HTML-элементов его поведение может быть трудно понять или предсказать. Это связано со сложными правилами наложения. На самом деле, в спецификации CSS Приложении E CSS 2.1 выделена отдельная секция для лучшего объяснения этих правил.

В данном руководстве мы постараемся объяснить эти правила с некоторой упрощенной интерпретацией и примерами.