Что такое z-index и как он используется в веб-разработке?

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

Он используется для управления глубиной наложения элементов с позиционированием (т.е. элементы, у которых свойство position имеет значения, отличные от static): relative, absolute, fixed, sticky.

Основные моменты использования:

• Элементы со статическим позиционированием (position: static;) не участвуют в контексте наложения и игнорируют z-index.
• Значение z-index применяется только к элементам, которые создают новый контекст наложения. Такой контекст создается, например, при использовании position с значениями, отличными от static, или при применении некоторых других CSS-правил (например, opacity < 1).
• В рамках одного контекста наложения элементы с большим z-index располагаются выше.
• Вложенные контексты наложения стекируются как единое целое внутри родительского контекста.
• Без явного задания z-index, порядок наложения определяется порядком элементов в DOM.

Пример использования:

css