Ιδιότητα 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;
}