Что такое 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.

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

.box1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 2; /* Будет выше, чем .box2 */
}

.box2 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 1; /* Будет ниже, чем .box1 */
}