Ի՞նչ է պատասխանատու z-index հատկությունը CSS-ում:

CSS-ում z-index հատկությունը կառավարում է դիրքավորված տարրերի շերտավորման կարգը Z առանցքի վրա: Բարձր արժեք ունեցող տարրերը գտնվում են ցածր արժեք ունեցողների վերևում:

Հիմնական կետեր:

• Կիրառվում է միայն դիրքավորված տարրերի վրա (position: relative, absolute, fixed, sticky):
• Վերադարձը կարող է լինել թիվ (դրական, բացասական կամ զրո):
• Ավտոմատ արժեքը (auto) համապատասխանում է DOM ծառի կարգին:
• Բացասական z-index արժեքները կարող են տարրին տեղադրել под ծնողական տարրին և նրա բովանդակությանը:
• z-index ստեղծում է շերտավորման կոնտեքստ (stacking context): Դրանում գտնվող տարրերը դասակարգվում են z-index-ով, բայց ամբողջ կոնտեքստը որպես միավոր է գործել մյուս կոնտեքստների նկատմամբ:

Անհատական շերտավորման կարգը (z-index-ի բացակայությամբ):

1. Հիմնական տարրի ֆոնն ու սահմանները:
2. Դրական z-index-ով դիրքավորված տարրերը:
3. Նորմալ հոսքի բլոկային տարրերը:
4. Ֆլոտային տարրերը:
5. Ներմուծվող տարրերը նորմալ հոսքում:
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)։