Знаете ли вы, что в обычной структуре документа два элемента могут буквально «перекрывать» друг друга? Это происходит, когда они позиционируются со значением absolute, relative или fixed. В этот момент элементы выбиваются из общего потока и получают полную свободу: теперь их можно размещать где угодно, опираясь исключительно на предоставленные координаты.

Как только вы применяете к элементу свойство position, его точное местоположение начинает определяться свойствами , , или . Эти параметры задают координаты относительно экрана по осям X и Y:

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

Примечание: элементы с более высоким индексом всегда находятся перед элементами с более низким индексом относительно оси Z.