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