Η ιδιότητα z-index στη γλώσσα CSS χρησιμοποιείται για να καθορίσει τη σειρά εμφάνισης των στοιχείων σε μια ιστοσελίδα, όταν αυτά έχουν θέση τοποθέτησης (position) διαφορετική από την προεπιλεγμένη.
Η ιδιότητα z-index δέχεται έναν ακέραιο αριθμό ως τιμή. Όσο υψηλότερη είναι η τιμή του z-index ενός στοιχείου, τόσο πιο εμπρός θα εμφανίζεται αυτό το στοιχείο στη σελίδα. Αντίθετα, αν η τιμή του z-index είναι χαμηλότερη, το στοιχείο θα εμφανίζεται πίσω από άλλα στοιχεία με υψηλότερο z-index.
Η ιδιότητα z-index εφαρμόζεται σε στοιχεία που έχουν καθορισμένη θέση τοποθέτησης (position) τύπου relative, absolute ή fixed. Σε περίπτωση που υπάρχουν στοιχεία με το ίδιο z-index, η σειρά εμφάνισής τους καθορίζεται από τη σειρά στον κώδικα HTML.
Η χρήση της ιδιότητας z-index μας δίνει τη δυνατότητα να διαχειριζόμαστε την κάλυψη και τη διάταξη των στοιχείων σε μια ιστοσελίδα, επιτρέποντάς μας να δημιουργήσουμε επικαλύψεις, επιπλέον επίπεδα και εφέ που βασίζονται στη σειρά τους στον άξονα z.
Παράδειγμα:
HTML:
<div class="container"> <div class="box box1">Box 1</div> <div class="box box2">Box 2</div> <div class="box box3">Box 3</div> </div>
CSS:
.container {
/* Ορίζει τη θέση του στοιχείου ως σχετική */
position: relative;
/* Ορίζει το ύψος του στοιχείου σε 200px */
height: 200px;
}
.box {
/* Ορίζει τη θέση του στοιχείου ως απόλυτη */
position: absolute;
/* Ορίζει το πλάτος του στοιχείου σε 100px */
width: 100px;
/* Ορίζει το ύψος του στοιχείου σε 100px */
height: 100px;
/* Ορίζει το περιθώριο του στοιχείου σε 10px */
padding: 10px;
/* Ορίζει το χρώμα του κειμένου σε λευκό */
color: white;
/* Ορίζει τον οριζόντιο στοίχισμα του κειμένου στο κέντρο */
text-align: center;
}
.box1 {
/* Ορίζει το χρώμα του φόντου σε κόκκινο */
background-color: red;
/* Ορίζει το z-index του στοιχείου σε 1 */
z-index: 1;
}
.box2 {
/* Ορίζει το χρώμα του φόντου σε πράσινο */
background-color: green;
/* Ορίζει το z-index του στοιχείου σε 2 */
z-index: 2;
}
.box3 {
/* Ορίζει το χρώμα του φόντου σε μπλε */
background-color: blue;
/* Ορίζει το z-index του στοιχείου σε 3 */
z-index: 3;
}
Σε αυτό το παράδειγμα, έχουμε τρία στοιχεία <div> με κλάση .box. Το στοιχείο με κλάση .box3 έχει τη μεγαλύτερη τιμή z-index, επομένως βρίσκεται πάνω από τα άλλα στοιχεία. Ακολουθεί το .box2 με μεσαία τιμή z-index, και τέλος το .box1 με τη χαμηλότερη τιμή z-index. Αυτό καθορίζει τη στοίβαση των στοιχείων και την εμφάνισή τους στην περιοχή του .container.
[adinserter block=”2″]
Μπορείτε να προσαρμόσετε τις τιμές z-index ανάλογα με τις ανάγκες σας για να καθορίσετε τη σειρά εμφάνισης των στοιχείων στη σελίδα.
Ένα άλλο παράδειγμα με την ιδιότητα z-index μπορεί να είναι η δημιουργία ενός μενού που εμφανίζεται επάνω από το περιεχόμενο της σελίδας όταν ο χρήστης το ανοίγει.
HTML:
<div class="container">
<div class="content">
<h1>Καλώς ήρθατε!</h1>
<p>Αυτό είναι το περιεχόμενο της σελίδας.</p>
</div>
<div class="menu">
<h2>Μενού</h2>
<ul>
<li>Αρχική</li>
<li>Προφίλ</li>
<li>Ρυθμίσεις</li>
<li>Αποσύνδεση</li>
</ul>
</div>
</div>
CSS:
.container {
/* Ορίζει τη θέση στατική για το container */
position: relative;
}
.content {
/* Ορίζει το χρώμα φόντου του περιεχομένου σε ανοιχτό γκρι */
background-color: lightgray;
/* Προσθέτει περιθώριο στο περιεχόμενο */
padding: 20px;
}
.menu {
/* Ορίζει τη θέση απόλυτη για το μενού */
position: absolute;
/* Ορίζει την απόσταση από το πάνω μέρος του κοντέινερ */
top: 20px;
/* Ορίζει την απόσταση από το δεξί μέρος του κοντέινερ */
right: 20px;
/* Ορίζει το χρώμα φόντου του μενού σε ανοιχτό μπλε */
background-color: lightblue;
/* Προσθέτει περιθώριο στο μενού */
padding: 10px;
/* Ορίζει το z-index για το μενού */
z-index: 2;
}
.menu ul {
/* Καθορίζει το στυλ της λίστας του μενού */
list-style: none;
/* Αφαιρεί το περιθώριο της λίστας */
padding: 0;
/* Αφαιρεί το περιθώριο ανάμεσα στις επιλογές της λίστας */
margin: 0;
}
.menu li {
/* Ορίζει το περιθώριο κάτω από κάθε επιλογή της λίστας */
margin-bottom: 10px;
}
Σε αυτό το παράδειγμα, ο γονικός περιέκτης .container έχει position: relative; για να περιορίσει τη θέση του μενού .menu εντός του. Ο .content περιέχει το κύριο περιεχόμενο της σελίδας. Το μενού .menu έχει position: absolute; και τοποθετείται στην πάνω δεξιά γωνία του γονικού στοιχείου. Η ιδιότητα z-index: 2; καθορίζει ότι το μενού θα βρίσκεται επάνω από το υπόλοιπο περιεχόμενο. Έτσι, όταν το μενού είναι ανοικτό, εμφανίζεται επάνω από το περιεχόμενο της σελίδας.
Μπορείτε να προσαρμόσετε τον κώδικα CSS ανάλογα με το συγκεκριμένο σας σχεδιασμό και τις ανάγκες σας για την εμφάνιση του μενού.
Σωστά, όταν δύο στοιχεία με θέση συναντιούνται και δεν έχει καθοριστεί καμία τιμή z-index, το στοιχείο που έχει οριστεί τελευταίο στον κώδικα HTML θα εμφανιστεί επάνω από το άλλο. Αυτό συμβαίνει επειδή τα στοιχεία παρακολουθούν τη σειρά τους στον κώδικα HTML για τον καθορισμό της στοίβας (stacking order) τους.
Παράδειγμα:
HTML:
<div class="container"> <div class="box box1">Box 1</div> <div class="box box2">Box 2</div> </div>
CSS:
.container {
/* Ορίζει τη θέση του στοιχείου ως σχετική στον γονέα του */
position: relative;
}
.box {
/* Ορίζει τη θέση του στοιχείου ως απόλυτη εντός του γονέα του */
position: absolute;
/* Ορίζει το πλάτος του στοιχείου σε 100px */
width: 100px;
/* Ορίζει το ύψος του στοιχείου σε 100px */
height: 100px;
/* Προσθέτει περιθώριο 10px στο εσωτερικό του στοιχείου */
padding: 10px;
/* Ορίζει το χρώμα του κειμένου σε λευκό */
color: white;
/* Ορίζει τον οριζόντιο στοίχισμα του κειμένου στο κέντρο */
text-align: center;
}
.box1 {
/* Ορίζει το χρώμα φόντου του στοιχείου box1 σε κόκκινο */
background-color: red;
}
.box2 {
/* Ορίζει το χρώμα φόντου του στοιχείου box2 σε πράσινο */
background-color: green;
}
Σε αυτό το παράδειγμα, έχουμε δύο στοιχεία .box με κλάσεις .box1 και .box2. Καθώς δεν έχουμε καθορίσει τιμή z-index, το στοιχείο με κλάση .box2 που ορίζεται τελευταίο στον κώδικα HTML θα εμφανιστεί επάνω από το .box1.
Είναι σημαντικό να σημειωθεί ότι χωρίς την καθορισμένη τιμή z-index, το στοιχείο που ορίζεται πρώτο στον κώδικα HTML θα έχει τη μικρότερη τιμή στον άξονα βάθους (z-axis) και θα εμφανίζεται πίσω από τα υπόλοιπα στοιχεία.