Это свойство, которое определяет порядок наложения элементов на веб-странице по оси Z (перпендикулярно экрану пользователя). Элементы с таким более высоким значением будут располагаться поверх элементов с более низким значением этого свойства, что позволяет управлять тем, как элементы перекрывают друг друга на странице.
Ключевые аспекты:
1. Работает только для элементов, у которых свойство
position установлено как relative, absolute, fixed, или sticky. Для элементов с position: static (значение по умолчанию) z-index не применяется.2.
z-index может принимать целые числа (включая отрицательные), где элементы с более высоким значением будут находиться выше элементов с более низким значением.3. Каждый элемент с установленным
z-index создаёт новый контекст наложения для своих дочерних элементов. Это означает, что индекс дочерних элементов будет работать относительно их ближайшего родителя с позиционированием, а не всей страницы в целом.4. Значение по умолчанию для него —
auto. Это означает, что элемент наследует порядок наложения своего родителя и не создаёт новый контекст наложения..background {
position: absolute;
z-index: 1; /* Задний фон /
}
.foreground {
position: absolute;
z-index: 2; / Передний план */
}В этом примере элемент с классом
.foreground будет отображаться поверх элемента с классом .background из-за более высокого значения z-index.Важно помнить:
- Элементы с более высоким
z-index иногда могут блокировать доступ к элементам с более низким z-index, например, при попытке взаимодействия с формой или кнопками.- Безумное использование высоких значений
z-index (например, z-index: 99999) может привести к сложностям с поддержкой и отладкой кода. Лучше использовать умеренные значения и хорошо продуманную структуру наложения.- Порядок элементов в HTML также влияет на их наложение. По умолчанию, элементы, которые идут позже в коде, будут располагаться поверх элементов, расположенных ранее, если их
z-index не изменён.👉 @frontendInterview
