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