Front-end-Job-Interview-Questions

Ответы на вопросы на должность Frontend разработчика.

Project maintained by FedorovAlexander Hosted on GitHub Pages — Theme by mattgraham

Опишите z-index и как формируется контекст наложения.

Z-index управляет вертикальным положением элементов на странице (по оси Z). Работает только с позиционированными элементами (position: relative/absolute/fixed/sticky).

Контекст наложения:

Корневой элемент (<html>) создает контекст наложения
Позиционированные элементы с z-index ≠ auto создают новый контекст
Элементы с opacity < 1
Элементы с transform, filter, perspective, clip-path, mask
Элементы с will-change
Элементы с isolation: isolate

Правила наложения (от нижнего к верхнему):

Корневой элемент
Позиционированные элементы с отрицательным z-index
Непозиционированные элементы
Позиционированные элементы с z-index: auto
Позиционированные элементы с положительным z-index

Пример:

.parent {
	position: relative;
	z-index: 1;
}
.child {
	position: absolute;
	z-index: 2; /* Будет выше родителя только внутри его контекста */
}

Важно помнить:

Z-index работает только между элементами одного контекста наложения
Дочерние элементы не могут быть ниже фона родителя
Значение z-index может быть только целым числом

Предыдущий вопрос | Следующий вопрос