Ο ορισμός αυτής της τιμής ιδιότητας σε απόλυτη θα σύρει το αντικείμενο έξω από την κανονική απόλυτη θέση ροής εγγράφου, ανεξάρτητα από τη διάταξη του περιεχομένου γύρω από αυτό. Εάν άλλα αντικείμενα με διαφορετικές ιδιότητες z-index καταλαμβάνουν ήδη μια δεδομένη θέση, δεν θα επηρεάσουν το ένα το άλλο, αλλά θα επικαλύπτονται στην ίδια θέση. Το αντικείμενο δεν έχει εξωτερικό έμπλαστρο (περιθώριο), αλλά εξακολουθεί να έχει ένα εσωτερικό έμπλαστρο (χτύπημα) και ένα περίγραμμα (περίγραμμα).
Για να ενεργοποιήσετε την απόλυτη τοποθέτηση ενός αντικειμένου, πρέπει να καθορίσετε τουλάχιστον μία από τις ιδιότητες αριστερά, δεξιά, επάνω, κάτω και να ορίσετε αυτήν την τιμή γνωρίσματος σε απόλυτη. Διαφορετικά, τα παραπάνω χαρακτηριστικά θα χρησιμοποιήσουν την προεπιλεγμένη τιμή τους auto, η οποία θα κάνει το αντικείμενο να ακολουθεί τους κανονικούς κανόνες διαμόρφωσης HTML και να αποδίδεται αμέσως μετά το προηγούμενο αντικείμενο.
Τα χαρακτηριστικά TRBL (ΕΠΆΝΩ, ΔΕΞΙΆ, ΚΆΤΩ, ΑΡΙΣΤΕΡΆ) είναι έγκυρα μόνο εάν έχει οριστεί το χαρακτηριστικό θέσης.
Θα πρέπει να ορίσετε θέση:απόλυτη
Εάν ο γονέας (άπειρο) δεν ορίζει το χαρακτηριστικό θέσης, τότε το τρέχον απόλυτο τοποθετείται σε συνδυασμό με το χαρακτηριστικό TRBL στην επάνω αριστερή γωνία του προγράμματος περιήγησης ως το αρχικό σημείο
Εάν ο γονέας (άπειρο) ορίσει την ιδιότητα θέσης, τότε το τρέχον απόλυτο τοποθετείται σε συνδυασμό με την ιδιότητα TRBL στην επάνω αριστερή γωνία του γονέα (πρόσφατο) ως αρχικό σημείο.
Κατά τη ρύθμιση της θέσης: σχετική
Η επάνω αριστερή γωνία της γονικής (πρόσφατης) περιοχής περιεχομένου είναι το αρχικό σημείο σε συνδυασμό με το χαρακτηριστικό TRBL (ή μετατόπιση σε σχέση με το προηγούμενο στοιχείο του τοποθετημένου στοιχείου στη γονική περιοχή περιεχομένου) και η επάνω αριστερή γωνία του BODY είναι το αρχικό σημείο χωρίς το γονικό. Η σχετική τοποθέτηση δεν μπορεί να στρωθεί. Όταν χρησιμοποιείτε σχετική τοποθέτηση, το στοιχείο εξακολουθεί να καταλαμβάνει τον αρχικό του χώρο, ανεξάρτητα από το αν μετακινείται ή όχι. Επομένως, η μετακίνηση ενός στοιχείου προκαλεί την αντικατάσταση άλλων πλαισίων.
Σε γενικές γραμμές, εάν η ιστοσελίδα είναι κεντραρισμένη, είναι εύκολο να κάνετε λάθη όταν χρησιμοποιείτε το Absolute, επειδή η ιστοσελίδα προσαρμόζεται πάντα αυτόματα με το μέγεθος της ανάλυσης, ενώ το Absolute θα χρησιμοποιεί την επάνω αριστερή γωνία του προγράμματος περιήγησης ως αρχικό σημείο και δεν θα αλλάξει τη θέση λόγω της αλλαγής στην ανάλυση. Μερικές φορές είναι επίσης απαραίτητο να βασιστείτε στον δείκτη z για να ορίσετε τη σχέση μεταξύ του άνω και του κάτω μέρους του δοχείου, όσο μεγαλύτερη είναι η τιμή, τόσο υψηλότερη είναι η κορυφή και το αριθμητικό εύρος είναι ένας φυσικός αριθμός. Φυσικά, ένα πράγμα που πρέπει να σημειωθεί είναι ότι η σχέση γονέα-παιδιού δεν μπορεί να οριστεί με z-index και το θυγατρικό επίπεδο πρέπει να είναι πάνω και κάτω από το γονικό.
Ο ορισμός αυτής της τιμής ιδιότητας σε relative διατηρεί το αντικείμενο σε κανονική ροή HTML, αλλά η θέση του μπορεί να μετατοπιστεί με βάση το προηγούμενο αντικείμενό του. Το κείμενο ή τα αντικείμενα που ακολουθούν έναν σχετικό εντοπιστή καταλαμβάνουν το δικό τους χώρο χωρίς να καλύπτουν τον φυσικό χώρο του αντικειμένου που τοποθετείται. Αντίθετα, το κείμενο ή το αντικείμενο μετά το αντικείμενο απόλυτης τοποθέτησης καταλαμβάνει το φυσικό του χώρο πριν το αντικείμενο προορισμού απομακρυνθεί από την κανονική ροή του εγγράφου. Η τοποθέτηση ενός αντικειμένου απόλυτης τοποθέτησης έξω από τη θύρα προβολής προκαλεί την εμφάνιση μιας γραμμής κύλισης. Η τοποθέτηση ενός σχετικού αντικειμένου τοποθέτησης έξω από την περιοχή προβολής δεν εμφανίζεται με γραμμή κύλισης. Στην πραγματικότητα, το κύριο πρόβλημα με την τοποθέτηση είναι να θυμάστε το νόημα κάθε τοποθέτησης. Η σχετική τοποθέτηση είναι η αρχική θέση του στοιχείου "σε σχέση" με τη ροή του εγγράφου, ενώ η απόλυτη τοποθέτηση είναι το πρόγονο στοιχείο που έχει τοποθετηθεί "σε σχέση" με το πιο πρόσφατο.
Εδώ είναι οι προσθήκες:
Αν και γνωρίζω την απόλυτη τοποθέτηση (απόλυτη) και τη σχετική τοποθέτηση του CSS, δεν έχω γράψει ποτέ μόνος μου τα σχετικά εφέ!
Μετά από εργασία για περισσότερο από μισή μέρα, μπορεί να θεωρηθεί ολοκληρωμένο! Κατάλαβα επίσης μερικά από αυτά τα δύο χαρακτηριστικά!
Η περίληψη έχει ως εξής:
Ας ρίξουμε μια ματιά πρώτα στην ακόλουθη δομή στρώματος
<body>
<div id=θέση>
<div id=rel> Αυτό το επίπεδο εφαρμόζει μόνο θέση:σχετική; Στυλ </div>
<div id=abs> Αυτό το επίπεδο εφαρμόζει μόνο θέση:απόλυτη; Στυλ </div>
<div id=sss> δεν εφαρμόζει <div>στυλ
</div>
</body>
1. Απόλυτο: δεν καταλαμβάνει θέση, σχετικό: έχει θέση!
Όπως η ανωδομή:
Τα επίπεδα με id rel θα καταλαμβάνουν μία γραμμή όταν εμφανίζονται! Το στρώμα ABS πίσω από αυτό θα εμφανιστεί μόνο στην επόμενη γραμμή!
Όταν εμφανιστεί το επίπεδο με το αναγνωριστικό ABS, θα επικαλύπτεται με το αναγνωριστικό του SSS πίσω!
2. Από προεπιλογή (δεν τοποθετείται σε συνδυασμό με την κορυφή, κ.λπ.), η απόλυτη (απόλυτη τοποθέτηση) τοποθετείται από το γονικό επίπεδο
Για παράδειγμα, εάν το παραπάνω επίπεδο με αναγνωριστικό είναι ABS, εάν δεν είναι τοποθετημένο σε συνδυασμό με το TOP, η θέση εμφάνισης του θα είναι με το γονικό επίπεδο POSI (το POSI βρίσκεται στην κάτω αριστερή γωνία του εγγράφου και θα είναι επίσης στην κάτω αριστερή γωνία)
3. Όταν συνδυάζετε πάνω, κάτω, δεξιά, αριστερά και άλλα χαρακτηριστικά, η απόλυτη (απόλυτη τοποθέτηση) τοποθετείται με το παράθυρο ως θέση και η σχετική μετατοπίζεται με τη δική της πληρότητα ως γραμμή βάσης! Ως εξής:
<body>
<div id=θέση>
<div id=sss> δεν εφαρμόζει <div>στυλ
<div id=rel> Αυτό το επίπεδο εφαρμόζει θέση:σχετική; κάτω: 30 εικονοστοιχεία; Στυλ </div>
<div id=abs> Αυτό το επίπεδο εφαρμόζει μόνο θέση:απόλυτη; κάτω: 30 εικονοστοιχεία; Στυλ </div>
</div>
</body>
Παραπάνω κωδικός:
Το επίπεδο με το id rel μετακινείται προς τα πάνω και επικαλύπτει το επίπεδο με το id SSS
Το επίπεδο με ID ABS θα μετακινηθεί σε μια θέση 30 pixel μακριά από το παράθυρο με το παράθυρο ως γραμμή βάσης!
4. Όταν συνδυάζετε πάνω, κάτω, δεξιά, αριστερά και άλλα χαρακτηριστικά, εάν θέλετε η απόλυτη (απόλυτη τοποθέτηση) να χρησιμοποιεί το γονικό επίπεδο ως γραμμή βάσης τοποθέτησης, μπορείτε να εφαρμόσετε απόλυτα ή σχετικά χαρακτηριστικά στο γονικό επίπεδο! Ως εξής:
<body>
<div id=posi style="θέση:σχετική">
<div id=rel> Αυτό το επίπεδο εφαρμόζει θέση:σχετική; κάτω: 30 εικονοστοιχεία; Στυλ </div>
<div id=abs> Αυτό το επίπεδο εφαρμόζει μόνο θέση:απόλυτη; κάτω: 30 εικονοστοιχεία; Στυλ </div>
</div>
</body>
Ο παραπάνω κώδικας: id είναι το επίπεδο του posi, μπορείτε επίσης να χρησιμοποιήσετε το απόλυτο χαρακτηριστικό!
ID είναι το επίπεδο του REL, το οποίο δεν επηρεάζεται και αντισταθμίζεται από το δικό του σύμβολο κράτησης θέσης ως γραμμή βάσης!
Το επίπεδο με id ως ABS βασίζεται στο κάτω άκρο του στρώματος POSI ως γραμμή βάσης τοποθέτησης, εάν το ύψος του στρώματος POSI είναι μικρότερο από 30 εικονοστοιχεία αυτή τη στιγμή, το στρώμα ABS ενδέχεται να μην μπορεί να το δει!
|
Δημοσιεύτηκε στις 30/10/2014 2:39:28 μ.μ.
|
|
|
