z-index

z-index - это CSS свойство, которое определяет порядок наложения элементов на странице при использовании позиционирования (position) и прозрачности (opacity).

Значение z-index задает позицию элемента в трехмерном пространстве вдоль оси z (ось, направленная от экрана на зрителя), где элементы с большим значением z-index находятся ближе к пользователю, чем элементы с меньшим значением z-index.

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

Контекст наложения формируется на основе трех параметров:

1. Тип позиционирования (position) - элементы, имеющие тип позиционирования static (по умолчанию), не создают новый контекст наложения. Элементы, имеющие тип позиционирования relative, absolute или fixed, создают новый контекст наложения.
2. Уровень вложенности - элементы, находящиеся внутри других элементов, создают новый контекст наложения по умолчанию.
3. Значение z-index - элементы с большим значением z-index находятся ближе к пользователю, чем элементы с меньшим значением z-index.

Контекст наложения формируется по следующему порядку:

1. Элементы без позиционирования (position: static) и без указания z-index идут первыми в контексте наложения, затем идут элементы с позиционированием (position: relative, position: absolute, position: fixed), также без указания z-index.
2. Если есть два элемента с одинаковым типом позиционирования и уровнем вложенности, то элемент с большим значением z-index находится ближе к пользователю.
3. Если есть два элемента с разным типом позиционирования, то элемент с позиционированием более близким к position: fixed находится ближе к пользователю.

Таким образом, z-index - это CSS свойство, которое определяет порядок наложения элементов на странице при использовании позиционирования и прозрачности. Контекст наложения формируется на основе типа позиционирования, уровня вложенности и значения z-index. Он помогает определить порядок наложения элементов на странице, что может быть полезно при создании слоев, навигационных меню, всплывающих окон и т.д.

Назад