В CSS блок имеет позицию в трех измерениях. В дополнение к горизонтальному и вертикальному положению, блоки выкладываются вдоль оси Z друг над другом.
Порядок, в котором дерево документа отрисовывается на экране, описывается с помощью контекста наложения.
Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде:
- Корневой элемент <html>
- Блочные элементы
- float элементы
- Строковые элементы
- Позиционированные элементы
Свойство z-index создает новый контекст наложения. Оно изменяет порядок наложения позиционированных элементов. Элементы будут отображаться на странице в следующем порядке (если для них не заданы свойства - opacity, filter, transform):
Корневой элемент <html>.
Позиционированные элементы с отрицательным значением z-index.
Блочные элементы, неплавающие и непозиционированные.
float элементы.
Строковые элементы.
Позиционированные элементы с z-index: 0; и z-index: auto;.
