Какова цель свойства CSS z-index?
Свойство z-index в CSS используется для управления порядком наложения элементов на веб-странице. Оно определяет, какой элемент будет отображаться выше или ниже других элементов, когда они перекрывают друг друга.
Когда элементы имеют различные значения z-index, браузер использует эти значения, чтобы решить, какой элемент отображать поверх других. Элементы с большим значением z-index будут отображаться выше, чем элементы с меньшими значениями.
Основные моменты о z-index:
- Относительное положение: Чтобы свойство
z-indexработало, у элемента должно быть задано свойствоpositionсо значениемrelative,absolute,fixedилиsticky. Элементы сposition: static(значение по умолчанию) не учитываются в стеке наложения. - Контекст наложения: Каждое новое значение
z-indexсоздает новый "контекст наложения". Это означает, что элементы внутри этого контекста будут следовать правилам наложения только по отношению друг к другу, и не будут учитывать элементы вне этого контекста.
Пример использования z-index
Рассмотрим следующий пример, где два блока div перекрываются:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример z-index</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 1; /* Этот блок будет ниже */
}
.box2 {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
z-index: 2; /* Этот блок будет выше */
margin-top: -100px; /* Сдвигаем для наложения */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
Объяснение кода
- Первый блок (
.box1) имеет красный фон и значениеz-index: 1. Это значит, что он будет отображаться ниже второго блока. - Второй блок (
.box2) синим фоном и значениемz-index: 2будет поверх первого блока благодаря более высокомуz-index. Мы также добавили отрицательный верхний отступ для того, чтобы он перекрывал первый блок.
Зачем использовать z-index?
Свойство z-index особенно полезно при создании сложных интерфейсов, где элементы часто перекрываются. Например, в модальных окнах, всплывающих подсказках (tooltip) и когда вы создаете навигационные меню с подменю.
Помните, что при неправильном использовании z-index могут возникать проблемы с видимостью элементов, поэтому важно управлять значениями z-index аккуратно и соблюдать логику их назначения.