Z-Index: основы и применение в CSS

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

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

Примеры использования:

1. Создание всплывающего окна с помощью z-index

HTML:

   Открыть окно
   

      
Заголовок всплывающего окна
      
Текст всплывающего окна
   

CSS:

.container {
    position: relative; /* устанавливаем относительное позиционирование для контейнера */
}
.popup {
    position: absolute; /* устанавливаем абсолютное позиционирование для всплывающего окна */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* центрируем окно по вертикали и горизонтали */
    z-index: 1; /* задаем уровень z-index выше, чем у контейнера */
    background-color: #fff;
    width: 400px;
    height: 300px;
    padding: 20px;
    display: none; /* скрываем окно по умолчанию */
}
.btn {
    z-index: 2; /* задаем уровень z-index выше, чем у всплывающего окна */
    background-color: #008000;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.btn:hover {
    background-color: #006400;
}
/* отображаем всплывающее окно после нажатия на кнопку */
.btn:focus + .popup {
    display: block;
}

2. Размещение элементов на странице с помощью z-index

HTML:

CSS:

.container {
    position: relative; /* устанавливаем относительное позиционирование для контейнера */
}
.box {
    position: absolute; /* устанавливаем абсолютное позиционирование для блоков */
    width: 200px;
    height: 200px;
}
.box-1 {
    background-color: #008000;
    top: 50px;
    left: 50px;
    z-index: 2; /* задаем уровень z-index выше, чем у другого блока */
}
.box-2 {
    background-color: #ff0000;
    top: 100px;
    left: 100px;
    z-index: 1; /* задаем уровень z-index ниже, чем у другого блока */
}

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