Ιδιότητα z-index

Η ιδιότητα z-index καθορίζει ποιο στοιχείο θα είναι πάνω στην περίπτωση που πολλά στοιχεία επικαλύπτονται το ένα το άλλο.

Σύνταξη

cssεπιλογέας {
  z-index: αριθμός | auto;
}

Ο αριθμός πρέπει να είναι ακέραιος, θετικός ή αρνητικός. Μπορεί να είναι μηδέν.

Τιμές

Τιμή	Περιγραφή
Αριθμός	Ο ακέραιος αριθμός ορίζει τη σειρά επικάλυψης των στοιχείων: όταν τα στοιχεία επικαλύπτονται το ένα το άλλο, πάνω θα βρίσκεται αυτό με το μεγαλύτερο `z-index`.
`auto`	Η σειρά επικάλυψης χτίζεται αυτόματα: πιο πάνω θα είναι το στοιχείο που βρίσκεται πιο κάτω στον κώδικα HTML.

Προεπιλεγμένη τιμή: 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;
}

Результат: