თვისება 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;
}
:
