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