Свойство z-index

Наложение элементов с помощью свойства z-index

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

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

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

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

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

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

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

Корневой элемент <html>, который содержит все элементы веб-странице.

Блочные элементы, не плавающие и не позиционированные.

Плавающие float не позиционированные элементы в порядке их расположения в исходном коде.

Строковые не позиционированные элементы (текст, изображения).

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

flow-normal
normal-flow
Рис. 3. Порядок расположения элементов в 3D пространстве по умолчанию
<div class="main">
    <header style="height: 50px;"></header>
    <p style="float: left; width: 340px;"><img src="https://html5book.ru/images/winter-image.jpg" style="float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <aside style="float: left; width: 200px;"></aside>
    <article style="position: absolute; right: 40px; top: 130px; width: 160px; height: 100px;"></article>
    <footer style="height: 50px;"></footer>
</div>

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

Свойство z-index создает новый контекст наложения. Оно позволяет изменить порядок наложения позиционированных элементов. Элементы будут отображаться на странице в следующем порядке (если для них не заданы свойства, влияющие на контекст наложения — opacity, filter, transform):

Корневой элемент <html>, который содержит все элементы веб-странице.

Позиционированные элементы с отрицательным значением z-index.

Блочные элементы, не плавающие и не позиционированные.

Плавающие float не позиционированные элементы в порядке их расположения в исходном коде.

Строковые не позиционированные элементы (текст, изображения).

Позиционированные элементы со значениями z-index: 0; и z-index: auto;.

Позиционированные элементы с положительными значениями z-index. Высокое значение индекса отобразит элемент на переднем плане. Элементы с равными значениями z-index будут отображаться согласно их расположения в исходном коде.

flow-new
Рис. 4. Свойство z-index создает новый контекст наложения элементов в 3D пространстве
  • Алексей

    Елена, так про контекст наложения-то где? Где указано что в сформированном новом контексте наложения появляется «новый мир» по z-плоскости, корневой элемент, которого является «дном стакана», в котором расположены все его дочерние элементы? Что соревноваться могут только элементы, расположенные только в одном стакане, то есть в одном контексте форматирования? Что сначала идёт конкуренция в корневом контексте форматирования, потом показываются все элементы выигравшего «стакана», потом следующего и так до корневого? А внутри «стакана» конкуренция происходит ровно по тем правилам, которые Вы описали в своей статье, то есть элементы, находящиеся в определённом контексте форматирования «думают» что они находятся в корневом контексте форматирования и для них действуют теже правила?