Για τι είναι υπεύθυνη η ιδιότητα z-index στο CSS;

Η ιδιότητα z-index στο CSS ελέγχει τη σειρά στρώσεων των στοιχείων που έχουν θέση κατά μήκος του άξονα Z. Τα στοιχεία με μεγαλύτερη τιμή z-index τοποθετούνται πάνω από αυτά με μικρότερη.

Βασικά σημεία:

• Εφαρμόζεται μόνο σε στοιχεία με θέση (position: relative, absolute, fixed, sticky).
• Η τιμή μπορεί να είναι ένας αριθμός (θετικός, αρνητικός ή μηδέν).
• Η αυτόματη τιμή (auto) αντιστοιχεί στη σειρά στο DOM.
• Οι αρνητικές τιμές z-index μπορούν να τοποθετήσουν ένα στοιχείο κάτω από το γονικό στοιχείο και το περιεχόμενό του.
• Το z-index δημιουργεί ένα πλαίσιο στρώσεων (stacking context). Τα στοιχεία μέσα σε ένα ίδιο πλαίσιο ταξινομούνται με βάση το z-index, αλλά ολόκληρο το πλαίσιο συμπεριφέρεται ως μια ενιαία μονάδα σε σχέση με άλλα πλαίσια.

Προεπιλεγμένη σειρά στρώσεων (χωρίς z-index):

1. Το φόντο και τα περιγράμματα του ριζικού στοιχείου.
2. Τα στοιχειοθετημένα στοιχεία με αρνητικό z-index.
3. Τα μπλοκ στοιχεία στη φυσική ροή.
4. Τα στοιχεία με float.
5. Τα inline στοιχεία στη φυσική ροή.
6. Τα στοιχειοθετημένα στοιχεία με z-index: auto ή z-index: 0.
7. Τα στοιχειοθετημένα στοιχεία με θετικό z-index.

Παράδειγμα:

/* style.css */
.box {
  position: absolute;
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Πάνω από το μπλε */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Κάτω από το κόκκινο */
}

<!-- index.html -->
<div class="box red"></div>
<div class="box blue"></div>

Σε αυτή την περίπτωση, το κόκκινο μπλοκ (z-index: 1) θα βρίσκεται πάνω από το μπλε (z-index: 0).