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

Результат: