Любой элемент в HTML документе может быть либо на переднем, либо на заднем плане. Если свойства z-index и позиционирование не заданы явно, то порядок наложения равен порядку следования элементов в HTML.
Если позиционирование элементов (и их детей) указано явно, то такие элементы будут перекрывать собой элементы без явно заданного свойства позиционирования.
Если задан z-index. Во-первых, z-index учитывается только на явно позиционированных элементах. Если попытаться установить z-index на непозиционированный элемент, то ничего не произойдет. Во-вторых, значения z-index могут создавать контекст наложения.
Контекст наложения
Элементы с общими родителями, перемещающиеся на передний или задний план вместе, известны как контекст наложения.
Контекст наложения имеет свой корневой элемент в HTML структуре. В момент формирования нового контекста на элементе все дочерние элементы также попадают в этот контекст и занимают своё место в порядке наложения. Если элемент располагается в самом низу одного контекста наложения, то никаким образом не получится отобразить его над другим элементом в соседнем контексте наложения, располагающимся выше по иерархии, даже с установленным z-index равным миллиону.
Новый контекст может быть сформирован в следующих случаях:
- Если элемент — корневой элемент документа
- Если элемент позиционирован не статически и его значение z-index не равно auto.
- Если элемент имеет прозрачность менее 1.
Порядок наложения:
- Background и border элемента.
- Позиционированные элементы и его дети с z-index < 0.
- Элементы блочного уровня в нормальном потоке, то есть у которых position = static.
- Плавающие(float) элементы.
- inline-элементы.
- Элементы с z-index = 0 или auto. Элементы со свойством opacity < 1.