Τι είναι το z-index και πώς χρησιμοποιείται στην ανάπτυξη ιστοσελίδων;

z-index — είναι μια ιδιότητα CSS που καθορίζει τη σειρά στρώσεων (stacking) των στοιχείων βάσει της θέσης τους στον άξονα Z. Τα στοιχεία με μεγαλύτερες τιμές z-index εμφανίζονται πάνω από αυτά με μικρότερες.

Χρησιμοποιείται για τη διαχείριση του βάθους στρώσεων των στοιχείων με θέση (δηλαδή, στοιχείων των οποίων η ιδιότητα position έχει τιμές διαφορετικές από static): relative, absolute, fixed, sticky.

Βασικά σημεία χρήσης:

• Τα στοιχεία με στατική θέση (position: static;) δεν συμμετέχουν στο πλαίσιο στρώσεων και αγνοούν το z-index.
• Η τιμή z-index εφαρμόζεται μόνο σε στοιχεία που δημιουργούν νέο πλαίσιο στρώσεων. Αυτό το πλαίσιο δημιουργείται, για παράδειγμα, με τη χρήση position με τιμές διαφορετικές από static, ή με την εφαρμογή άλλων κανόνων CSS (π.χ. opacity < 1).
• Μέσα σε ένα ίδιο πλαίσιο στρώσεων, τα στοιχεία με μεγαλύτερο z-index τοποθετούνται πάνω.
• Τα εμφωλευμένα πλαίσια στρώσεων στοιβάζονται ως μια ενιαία μονάδα μέσα στο γονικό πλαίσιο.
• Χωρίς ρητή ανάθεση z-index, η σειρά στρώσεων καθορίζεται από τη σειρά των στοιχείων στο DOM.

Παράδειγμα χρήσης:

.box1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 2; /* Πάνω από το .box2 */
}

.box2 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 1; /* Κάτω από το .box1 */
}