Šta je z-index i kako se koristi u veb razvoju?

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 */
}