Властивість z-index визначає порядок накладання позиціонованих елементів на веб-сторінці. Вона застосовується лише до позиціонованих елементів, які мають значення властивості position: absolute, fixed, relative або sticky. Оскільки ці елементи виводяться з нормального потоку документа, для визначення того, який із них буде розташований вище або нижче, використовується z-index.

z-index: number_without_units

Чим більше значення властивості z-index, тим вище елемент відображається на екрані користувача.

Практичне завдання. Є чотири елементи div з класом box, кожен оформлений як квадрат і пронумерований відповідно до їхнього порядку в документі html. Квадрати наразі розташовані один над одним. Завдання — змінити значення властивості z-index так, щоб квадрат 3 був попереду всіх, а квадрат 4 — позаду.

Примітка

Якщо встановити однакове значення властивості z-index для різних елементів, браузер відобразить ці елементи у тому порядку, в якому вони розташовані у файлі html.