Z-index հատկությունը
z-index հատկությունը սահմանում է, թե որ տարրը
կլինի վերևում, երբ մի քանի տարրեր վերադրվում են մեկը մյուսի վրա:
Շարահյուսություն
ընտրող {
z-index: թիվ | auto;
}
Թիվը պետք է լինի ամբողջ, դրական կամ բացասական: Կարող է լինել զրո:
Արժեքներ
| Արժեք | Նկարագրություն |
|---|---|
| Թիվ |
Ամբողջ թիվը սահմանում է տարրերի վերադրման կարգը.
երբ տարրերը վերադրվում են մեկը մյուսի վրա, վերևում
կլինի այն տարրը, որի z-index-ն ավելի մեծ է:
|
auto |
Վերադրման կարգը կառուցվում է ավտոմատ. վերևում կլինի այն տարրը, որը գտնվում է HTML կոդում ավելի ներքև: |
Լռելյայն արժեքը՝ auto:
Օրինակ
Այս օրինակում բլոկները կվերադրվեն մեկը մյուսի վրա
ըստ HTML կոդում իրենց հերթականության
(z-index-ը նշված չէ և կունենա
լռելյայն արժեքը - auto): Առաջին
բլոկը կլինի ամենաներքևում (կարմիր), իսկ վերջինը
- ամենավերևում (կանաչ):
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
#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 ունեցող բլոկը):
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
#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;
}
: