⚙️ Как работает свойство z-index в CSS?

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

➡️ В этом примере элемент с z-index: 2 будет отображаться поверх элемента с z-index: 1:

.element1 {
  position: relative;
  z-index: 1;
}

.element2 {
  position: relative;
  z-index: 2;
}

🗣 Важно помнить, что свойство z-index работает только с элементами, у которых установлено позиционирование (position: relative, absolute, fixed или sticky).

🖥 Подробнее тут