CSS. Как работает z-index
На первый взгляд принцип его работы звучит просто: элементы с более высоким значением z-index отображаются поверх элементов с низким z-index. Но если не знать о контексте наложения, то результат может показаться странным. Для начала давайте разберемся с тем, как браузер по умолчанию позиционирует элементы, когда не указаны значения z-index:
- Корневой элемент документа, то есть
<html>
- Непозиционируемые элементы в том порядке, в котором они определены
- Позиционированные элементы в том порядке, в котором они определены
Непозиционируемый элемент — это элемент со значением position
по умолчанию, то есть static
. Позиционируемый элемент — это элемент с любым другим значением свойства position
, то есть absolute
, relative
, sticky
или fixed
.
<div class="purple"></div> <div class="blue"></div> <div class="green"></div>
div {
width: 200px;
height: 200px;
}
.blue, .purple {
position: absolute;
}
.purple {
background-color: purple;
top: 40px;
left: 40px;
}
.blue {
background-color: blue;
top: 80px;
left: 80px;
}
.green {
background-color: green;
}
Мы определили зеленый квадрат в конце документа. Тем не менее, он появляется не впереди, а позади всех остальных элементов, потому что у него не задано позиционирование.
Позиционирование с применением z-index
Если теперь мы хотим изменить порядок расположения элементов по оси z, мы можем использовать CSS-свойство z-index
. Элемент с более высоким z-индексом будет отображаться перед элементом с более низким z-индексом. Следует отметить, что z-индекс работает только с позиционируемыми элементами.
div {
width: 200px;
height: 200px;
}
.blue, .purple {
position: absolute;
}
.purple {
background-color: purple;
top: 40px;
left: 40px;
z-index: 2; /* добавляем z-index */
}
.blue {
background-color: blue;
top: 80px;
left: 80px;
z-index: 1; /* добавляем z-index */
}
.green {
background-color: green;
z-index: 100; /* добавляем z-index */
}
Перед синим квадратом отображается пурпурный квадрат, потому что он имеет более высокий z-index
. Зеленый квадрат остался внизу, z-index
никак не повлиял на него.
Контекст наложения (stacking order)
В примере выше для всех абсолютно позиционированных элементов конткстом наложения был корневой элемент <html>
. Абсолютно позиционированные элементы выстаивались вдоль оси z соответственно их значениям z-index
. Но элементы, у которых position
не равен static
, а z-index
не равен auto
, формируют свой контекст наложения. Значение z-index
для дочернего элемента будет влиять только на расположение этого элемента относительно других дочерних элементов.
<div class="purple"> <!-- имеет свой контекст наложения --> <div class="orange"></div> <div class="red"></div> </div> <div class="blue"></div> <div class="green"></div>
div {
width: 200px;
height: 200px;
}
.blue, .purple, .orange, .red {
position: absolute;
}
.purple {
background-color: purple;
top: 40px;
left: 40px;
z-index: 1; /* добавляем z-index */
}
.purple .orange { /* дочерний элемент */
background-color: orange;
width: 100px;
height: 100px;
top: 20px;
left: 20px;
z-index: 20; /* добавляем z-index */
}
.purple .red { /* дочерний элемент */
background-color: red;
width: 100px;
height: 100px;
top: 40px;
left: 40px;
z-index: 10; /* добавляем z-index */
}
.blue {
background-color: blue;
top: 100px;
left: 100px;
z-index: 2; /* добавляем z-index */
opacity: 0.7;
}
.green {
background-color: green;
z-index: 100; /* добавляем z-index */
}
Элементы orange
и red
выстаиваются по оси z в контексте элемента purple
. Хотя у элемента blue
значение z-index
равно двум, а у orange
и red
равен 20 и 10 — элемент blue
расположен над ними (имеет прозрачность, чтобы были видны orange
и red
). Потому что он в контексте <html>
имеет более высокий z-index
, чем элемент purple
.
Обратите внимание, что если не задавать z-index
для purple
и blue
— они не будут формировать свой контекст. И для элементов orange
и red
контекстом наложения будет элемент <html>
.
Контекст наложения формируется не только при использовании свойства z-index
. Существует и другие свойства, которые заставляют элементы создавать контекст, например — filter
, opacity
, transform
. Кроме того, контекст наложения формирует flex
-элемент с z-index
отличным от auto
, чей родительский элемент имеет свойство display
, равное flex
или inline-flex
.
- CSS-переходы и CSS-анимации
- JavaScript. Простой слайдер
- DOM, часть 4 из 4. Атрибуты и свойства
- DOM, часть 3 из 3. Поиск элементов
- DOM, часть 2 из 3. Изменение документа
- Браузерные события, часть 5 из 5. Генерация пользовательских событий
- Браузерные события, часть 4 из 5. Действие браузера по умолчанию
Поиск: CSS • HTML • Web-разработка • Frontend • Верстка • Теория