Z-index հատկությունը

z-index հատկությունը սահմանում է, թե որ տարրը կլինի վերևում, երբ մի քանի տարրեր վերադրվում են մեկը մյուսի վրա:

Շարահյուսություն

cssընտրող {
  z-index: թիվ | auto;
}

Թիվը պետք է լինի ամբողջ, դրական կամ բացասական: Կարող է լինել զրո:

Արժեքներ

Լռելյայն արժեքը՝ auto:

Օրինակ

Այս օրինակում բլոկները կվերադրվեն մեկը մյուսի վրա ըստ HTML կոդում իրենց հերթականության (z-index-ը նշված չէ և կունենա լռելյայն արժեքը - auto): Առաջին բլոկը կլինի ամենաներքևում (կարմիր), իսկ վերջինը - ամենավերևում (կանաչ):

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
}

Результат:

Օրինակ

Փոխենք վերադրման կարգը` նշելով z-index-ը: Կարմիր բլոկին - 3, կապույտին - 2, կանաչին - 1: Վերադրման կարգը կփոխվի հակառակի (ամենավերևում կլինի z-index-ը 3 ունեցող բլոկը):

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
  z-index: 3;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
  z-index: 2;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
  z-index: 1;
}

Результат: