Какво е z-index и как се използва в уеб разработката?

z-index — това е CSS свойство, което определя реда на слоевете (stacking) на елементите въз основа на тяхното разположение по оста 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 */
}