Ինչ է z-index-ը և ինչպես է այն օգտագործվում վեբ զարգացման մեջ?

z-index — CSS հատկություն է, որը որոշում է տարրերի շերտավորման կարգը (stacking) նրանց Z առանցքի վրա գտնվելու հիման վրա: Բարձր z-index արժեք ունեցող տարրերը ցուցադրվում են ցածր 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-ից */
}