Масъулияти хусусияти z-index дар CSS барои чӣ аст?

Масъулияти z-index дар CSS назорати тартиби қабати кардани унсурҳои ҷойгиршуда дар тӯли оси Z мебошад. Унсурҳое бо арзиши z-index баландтар дар болои унсурҳое бо арзиши поёнтар ҷойгир мешаванд.

Мавзӯъҳои асосӣ:

• танҳо ба унсурҳои ҷойгиршуда татбиқ мешавад (position: relative, absolute, fixed, sticky).
• Арзиш метавонад як рақам бошад (манфӣ, мусбат ё сифр).
• Арзиши автоматӣ (auto) мувофиқи тартиби дар дарахти DOM мебошад.
• Арзишҳои манфӣ z-index метавонанд унсурро зери унсури падар ва мундариғаи он ҷойгир кунанд.
• z-index як контексти қабатбандӣ (stacking context) месозад. Унсурҳо дар дохили як контекст ба тартиб бо z-index ҷойгир мешаванд, аммо тамоми контекст ҳамчун як воҳид дар муқобили дигар контекстҳо рафтор мекунад.

Тартиби қабатбандӣ дар ҳолати стандарт (бе z-index):

1. Замина ва марзҳои унсури реша.
2. Унсурҳои ҷойгиршуда бо z-index манфӣ.
3. Унсурҳои блокӣ дар ҷараёни оддӣ.
4. Унсурҳои парвозкунанда (float).
5. Унсурҳои inline дар ҷараёни оддӣ.
6. Унсурҳои ҷойгиршуда бо z-index: auto ё z-index: 0.
7. Унсурҳои ҷойгиршуда бо z-index мусбат.

Масалан:

/* style.css */
.box {
  position: absolute;
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Баъд аз кабуд */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Аз болои кабуд */
}

<!-- index.html -->
<div class="box red"></div>
<div class="box blue"></div>

Дар ин ҳолат, блоки сурх (z-index: 1) болои блоки кабуд (z-index: 0) қарор мегирад.