Ως αποτέλεσμα της ανάγνωσης αυτού του άρθρου, θα μπορείτε να δημιουργήσετε επικαλυπτόμενα div με CSS. Για το σκοπό αυτό, πρώτα θα μάθουμε για το « θέση ' και ' z-δείκτης ' ιδιότητες.
Ας αρχίσουμε!
Ιδιότητα 'θέση' CSS
Σε HTML, μπορείτε να ορίσετε τη θέση των στοιχείων χρησιμοποιώντας το ' θέση ” ιδιοκτησία. Η τελική θέση ενός στοιχείου σε μια ιστοσελίδα καθορίζεται από τα δεξιά, αριστερά, πάνω, κάτω και σε συνδυασμό με τις ιδιότητες z-index.
Σύνταξη
Η σύνταξη της ιδιότητας θέσης είναι:
θέση : αξία
Στη θέση του « αξία ”, μπορείτε να ορίσετε διαφορετικές θέσεις στοιχείων όπως απόλυτη, σχετική, σταθερή και κολλώδης.
Ιδιότητα 'z-index' CSS
Ο ' z-δείκτης Η ιδιότητα ” χρησιμοποιείται για τον ορισμό της σειράς στοίβας των στοιχείων. Το στοιχείο που έχει τη μεγαλύτερη τιμή z-index τοποθετείται μπροστά από τα άλλα.
Σύνταξη
Η σύνταξη της ιδιότητας z-index είναι η εξής:
z-δείκτης : αυτο |αριθμόςΣτην παραπάνω σύνταξη, ' αυτο ' χρησιμοποιείται για να ορίσετε τη σειρά σύμφωνα με το γονικό στοιχείο, ενώ για τη μη αυτόματη ακολουθία, το ' αριθμός ' ορίζεται ως η τιμή της ιδιότητας z-index.
Τώρα, ας περάσουμε στο πρακτικό παράδειγμα δημιουργίας επικαλυπτόμενων div με CSS.
Παράδειγμα 1: Επικαλυπτόμενη δεύτερη διάσταση με την πρώτη
Στην ενότητα HTML, θα δημιουργήσουμε δύο div και θα εκχωρήσουμε διαφορετικά ονόματα κλάσεων ως ' div1 ' και ' div2 '.
HTML
< σώμα >< div τάξη = 'div1' >< / div >
< div τάξη = 'div2' >< / div >
< / σώμα >
Τώρα, μεταβείτε στο CSS και ακολουθήστε τις οδηγίες που δίνονται:
- Ορίστε την τιμή της ιδιότητας θέσης ως ' απόλυτος ” για το μέρος div1 ακριβώς στο μέρος που θέλετε.
- Προσαρμόστε το ύψος και το πλάτος του div1 ως ' 250 px ' και ' 300 εικονοστοιχεία '.
- Η τιμή του δείκτη z ορίζεται ως ' 1 '.
- Ορίστε το χρώμα φόντου του div1 ως ' rgb(4, 3, 75) '.
CSS
.div1 {θέση : απόλυτος ;
ύψος : 250 px ;
πλάτος : 300 εικονοστοιχεία ;
z-δείκτης : 1 ;
Ιστορικό : rgb ( 4 , 3 , 75 ) ;
}
Παραγωγή
Το πρώτο div τοποθετήθηκε με επιτυχία. Τώρα, περνάμε στο δεύτερο div.
Για να επικαλύψετε το div2, ακολουθήστε τις οδηγίες που δίνονται:
- Ορίστε την τιμή της ιδιότητας θέσης, του πλάτους και του ύψους του div2 όπως το ' div1 '.
- Ορίστε την τιμή του δείκτη z ως ' δύο ” για να το τοποθετήσετε μπροστά από το πρώτο div.
- Ορίστε ένα διαφορετικό χρώμα φόντου για το div2 ως ' rgb(0, 204, 255) '.
- Ορίστε το περιθώριο του div2 ως ' 50 εικονοστοιχεία ” ως τιμή περιθωρίου κορυφής και περιθωρίου αριστερά.
- Ορίστε την αδιαφάνεια του div2 ως ' 0,7 '.
CSS
.div2 {θέση : απόλυτος ;
πλάτος : 300 εικονοστοιχεία ;
ύψος : 250 εικονοστοιχεία ;
z-δείκτης : 3 ;
Ιστορικό : rgb ( 0 , 204 , 255 ) ;
περιθώριο : 50 εικονοστοιχεία ;
αδιαφάνεια : 0,7 ;
}
Παραγωγή
Το Div2 επικαλύπτεται με επιτυχία με το div1.
Εάν θέλετε να ρυθμίσετε το div1 πάνω από το div two, απλά πρέπει να αλλάξετε την τιμή του δείκτη z. Ας δούμε ένα παράδειγμα αυτού.
Παράδειγμα 2: Επικάλυψη First Div με Δεύτερο
Σε αυτό το παράδειγμα, θα αλλάξουμε την τιμή του δείκτη z και των δύο div. Στο ' .div1 ' κλάση του αρχείου CSS, ορίστε την τιμή ' z-δείκτης 'περιουσία ως ' δύο ”:
z-δείκτης : δύο ;Μετά από αυτό, στο « .div2 ' class, ορίστε την τιμή του ' z-δείκτης 'περιουσία ως ' 1 ”:
z-δείκτης : 1 ;Ως αποτέλεσμα, το πρώτο div θα τοποθετηθεί μπροστά από το δεύτερο div:
Συγκεντρώσαμε την πιο εύκολη μέθοδο για τη δημιουργία δύο επικαλυπτόμενων div με CSS.
συμπέρασμα
Ο ' θέση ' και ' z-δείκτης Η ιδιότητα ' χρησιμοποιείται για τη δημιουργία επικαλυπτόμενων div στο CSS. Από προεπιλογή, η τιμή του δείκτη z είναι 1, που δηλώνει ότι το νέο div που δημιουργήθηκε θα τοποθετηθεί μπροστά από το υπάρχον div. Ωστόσο, μπορείτε να καθορίσετε οποιαδήποτε τιμή σύμφωνα με τις απαιτήσεις σας για να προσαρμόσετε την αλληλοεπικαλυπτόμενη ακολουθία. Σε αυτό το άρθρο, προσφέραμε τις μεθόδους για τη δημιουργία επικαλυπτόμενων Div με CSS.