Обычно элементы на странице располагаются только в двух измерениях — x (горизонталь) и y (вертикаль). Но в отдельных случаях, когда позиционирование элементов отличается от статичного, появляется третье измерение z, отвечающее за глубину.
Свойство z-index позволяет управлять порядком наложения элементов друг на друга.
Значением свойства z-index может быть отрицательное или положительное целое число. Значение по умолчанию — auto.
.selector {
z-index: auto;
z-index: 0;
z-index: -1;
z-index: 1;
z-index: 9999999;
z-index: -999999;
}
Браузер выстраивает блоки страницы не только по вертикали и горизонтали, но и по глубине. Это встроенный механизм обработки документа. Чем ниже блок в разметке, тем выше он в стопке. Управлять порядком наложения блоков мы как раз и можем при помощи z-index.
z-index срабатывает для элементов с позиционированием (свойство position), отличающимся от статичного (значения relative, absolute, fixed, sticky).
- Исключение из правил: z-index работает с элементами, у которых значение свойства opacity меньше 1.
- z-index также срабатывает у флекс и грид-элементов и везде, где создаётся контекст наложения.
- Если z-index не указан, то блоки накладываются друг на друга в том порядке, в котором указаны в разметке. Чем ниже в разметке, тем выше в стопке. А если указан, то стопка блоков формируется согласно значению этого свойства.
Некоторые виджеты по умолчанию обладают высоким z-индексом, поэтому они перекрывают другие элементы (к примеру, dropdown или всплывающее окно).
Если обычный способ с z-index не отрабатывает, есть еще один вариант. Задание свойства opacity: .99 почти не повлияет на внешний вид, но позволит использовать z-index без изменения позиционирования элемента.
Одним из таких виджетов является фильтр.
В этом случае элементу сверху можно задать повышенный z-index, а фильтру свойство opacity: .99
