CSS Z Index: Полное руководство для управления слоями и навигации веб-страниц

CSS свойство z-index определяет порядок наложения элементов визуально на странице. Оно задает значение для уровня z-оси элемента, где более высоким значением является более высокий уровень наложения.

Значение z-index может быть любым целым числом. Целое число соответствует уровню z-оси, а отрицательное значение означает, что элемент находится за уровнем z-оси.

Пример использования z-index в CSS:

В приведенном выше примере две div-элементы наложены друг на друга. Элемент с идентификатором «two» имеет более высокий уровень z-оси, чем элемент с идентификатором «one», поэтому он находится поверх него. Оба элементы имеют абсолютное позиционирование, поэтому они не занимают места в потоке документа, и их положение задается с помощью CSS свойств left и top.

Z-index также может использоваться с другими свойствами CSS, такими как opacity и transform, чтобы создать интересные эффекты. Например, вы можете использовать z-index со свойством opacity, чтобы создать полупрозрачный слой поверх другого элемента:

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
}

В этом примере добавляется полупрозрачный слой поверх содержимого страницы, чтобы создать эффект. Значение rgba(0,0,0,0.5) устанавливает черный цвет с непрозрачностью в 50%, а свойство z-index задает уровень наложения элемента 2.

В общем, CSS свойство z-index может быть использовано для управления порядком наложения элементов при создании красивых и привлекательных веб-страниц.