Η θέση των στοιχείων HTML παίζει ζωτικό ρόλο στην οργάνωση των στοιχείων της ιστοσελίδας. Πιο συγκεκριμένα, η θέση των στοιχείων μπορεί να ρυθμιστεί χρησιμοποιώντας το CSS ' θέση ” ιδιοκτησία. Αυτή η ιδιότητα μπορεί να συσχετιστεί με ιδιότητες μετατόπισης, όπως ιδιότητες πάνω, αριστερά, δεξιά και κάτω, παρέχοντας συγκεκριμένες τιμές για την προσαρμογή του στοιχείου στη σελίδα. Ωστόσο, το ' απόλυτος Τα τοποθετημένα στοιχεία μπορούν να ρυθμιστούν σε σχέση με το πλησιέστερο τοποθετημένο στοιχείο.
Αυτή η ανάρτηση θα εξηγήσει την απόλυτη τοποθέτηση CSS.
Ιδιότητα 'θέση' CSS
Ο ' θέση Η ιδιότητα ' στο CSS μπορεί να χρησιμοποιηθεί για την προσαρμογή της θέσης του στοιχείου. Διαφορετικές τιμές της ιδιότητας θέσης είναι σταθερές, απόλυτες, σχετικές, στατικές και κολλώδεις. Αυτές οι τιμές ορίζονται με τις ιδιότητες μετατόπισης, όπως πάνω, δεξιά, αριστερά και κάτω, για την προσαρμογή της θέσης του στοιχείου.
Πώς να εφαρμόσετε CSS Absolute Positioning;
Η απόλυτη τοποθέτηση του στοιχείου μπορεί να εφαρμοστεί χρησιμοποιώντας το CSS ' θέση “ακίνητο με την αξία” απόλυτος '. Το στοιχείο με την απόλυτη θέση ρυθμίζεται ανάλογα με το πλησιέστερο τοποθετημένο μητρικό στοιχείο. Αλλά εάν ο πρόγονος δεν είναι τοποθετημένος, θα προσαρμοστεί σε σχέση με το τμήμα του σώματος του εγγράφου.
Παράδειγμα
Ας κατανοήσουμε την έννοια με ένα πρακτικό παράδειγμα.
Βήμα 1: Δημιουργήστε ένα αρχείο HTML
Στο αρχείο HTML, μέσα στο στοιχείο body, προσθέστε ένα div με το όνομα κλάσης ' κύριος '. Στη συνέχεια, μέσα στο δημιουργημένο div, προσθέστε μια ετικέτα HTML που σχετίζεται με τα ακόλουθα χαρακτηριστικά:
-
- ' src ” παρέχει έναν σύνδεσμο προς την εικόνα.
- ' τάξη ' χρησιμοποιείται στο CSS για το στυλ των στοιχείων.
- ' τα παντα Το χαρακτηριστικό ” προσδιορίζει το κείμενο που εμφανίζεται στη θέση της εικόνας εάν η εικόνα δεν φορτώσει στη σελίδα.
- ' τα παντα Το χαρακτηριστικό ” προσδιορίζει το κείμενο που εμφανίζεται στη σελίδα στη θέση της εικόνας εάν η εικόνα δεν φορτώσει στη σελίδα.
Στη συνέχεια, προσθέστε ένα άλλο div που περιέχει την επικεφαλίδα και τα στοιχεία h1 και p της παραγράφου:
< div τάξη = 'κύριος' >< div τάξη = 'περιεχόμενο' >
< img src = 'images/linuxlogo.png' τάξη = 'Σπίτι' τα παντα = 'linux logo' πλάτος = '80px' >
< h1 > Η απόλυτη τοποθέτηση CSS h1 >
< Π > Γεια σας ομάδα Linuxhint ! Π >
div >
div >
Στο CSS, πολλές ιδιότητες στυλ χρησιμοποιούνται για τη διακόσμηση των στοιχείων HTML.
Βήμα 2: Δώστε στυλ σε όλα τα στοιχεία
* {γραμματοσειρά-οικογένεια: Verdana, Geneva, Tahoma, sans-serif;
}
Τα στοιχεία HTML διαμορφώνονται χρησιμοποιώντας το ' γραμματοσειρά-οικογένεια “ακίνητο με την αξία” Verdana, Γενεύη, Tahoma, sans-serif '. Αυτή η λίστα τιμών διασφαλίζει ότι εάν το πρόγραμμα περιήγησης δεν υποστηρίζει το πρώτο στυλ, θα εφαρμοστεί το άλλο.
Βήμα 3: Στυλ 'home' div
.Σπίτι {θέση: απόλυτη;
κορυφή: 50 px;
αριστερά: 45 px;
}
Παρακάτω είναι οι ιδιότητες που εφαρμόζονται στο ' Σπίτι ” div:
-
- ' θέση Η ιδιότητα ' ορίζει τη θέση του στοιχείου. Εδώ, η προσθήκη ' απόλυτος ” θα τοποθετήσει το στοιχείο σε σχέση με το τμήμα σώματος του HTML.
- ' μπλουζα Η ιδιότητα ” χρησιμοποιείται για την κατακόρυφη ρύθμιση του στοιχείου.
- ' αριστερά Η ιδιότητα ” χρησιμοποιείται για την οριζόντια προσαρμογή του στοιχείου.
Βήμα 4: Διαχωρισμός «περιεχομένου» στυλ
.περιεχόμενο {Χρώμα φόντου: μπλε καντ.
πλάτος: 300 px;
ύψος: 250 px;
padding-αριστερά: 40px;
περιθώριο-αριστερά: 80 εικονοστοιχεία;
}
Παρακάτω είναι οι ιδιότητες CSS που εφαρμόζονται στο ' περιεχόμενο ” div:
-
- ' χρώμα του φόντου Η ιδιότητα ' ορίζει το χρώμα φόντου του στοιχείου.
- ' πλάτος Η ιδιότητα ' ορίζει το πλάτος του στοιχείου.
- ' ύψος Η ιδιότητα ' ορίζει το ύψος του στοιχείου.
- ' padding-αριστερά Η ιδιότητα ' έχει ρυθμιστεί να προσθέτει χώρο στην αριστερή πλευρά του περιεχομένου του στοιχείου.
- ' περιθώριο-αριστερά Η ιδιότητα ” προσδιορίζει το χώρο στην αριστερή πλευρά του στοιχείου.
Σε αυτό το σημείο, η ιστοσελίδα μας θα μοιάζει με αυτό:
Από το παραπάνω αποτέλεσμα φαίνεται ότι η εικόνα του div home τοποθετείται σε 50px από την κορυφή και 45px από τα αριστερά του σώματος του εγγράφου. Επιπλέον, η θέση του home div ορίζεται σε σχέση με το τμήμα σώματος του HTML.
Πώς να προσαρμόσετε τη θέση του στοιχείου «σε σχέση» με το τοποθετημένο γονικό στοιχείο;
Αυτή η ενότητα θα σας καθοδηγήσει στην προσαρμογή της θέσης του στοιχείου σε σχέση με το πλησιέστερο γονικό στοιχείο θέσης.
Ορισμός 'θέση' Ιδιότητα του 'περιεχομένου' div
θέση: σχετική;
Για να προσαρμόσετε τη θέση του στοιχείου σε σχέση με το γονικό στοιχείο, ορίστε το ' θέση 'η ιδιότητα του γονικού στοιχείου σε ' συγγενής ' αξία.
Ορίστε την ιδιότητα 'θέση' του στοιχείου 'img'.
.Σπίτι {θέση: απόλυτη;
κορυφή: 100 px;
αριστερά: 220 px;
}
Εδώ:
-
- ' θέση ' ιδιοκτησία με την τιμή που έχει οριστεί ως ' απόλυτος Το ” θα τοποθετηθεί σε σχέση με το γονικό στοιχείο (δηλαδή, η θέση div περιεχομένου ορίζεται με την τιμή σχετική).
- ' μπλουζα Η ιδιότητα ” χρησιμοποιείται για τη ρύθμιση της θέσης του στοιχείου από την κορυφή.
- ' αριστερά Η ιδιότητα ” χρησιμοποιείται για τη ρύθμιση της θέσης του στοιχείου από τα αριστερά.
Παραγωγή
Μπορεί να φανεί από το αποτέλεσμα ότι η εικόνα έχει τοποθετηθεί σε σχέση με το γονικό div της και φαίνεται κατάλληλη.
συμπέρασμα
Το CSS ' θέση Η ιδιότητα ' χρησιμοποιείται για τον καθορισμό της θέσης των στοιχείων HTML. Αυτή η ιδιότητα μπορεί να εκτιμηθεί ως σταθερή, σχετική, απόλυτη, κολλώδης και στατική. Ο ' απόλυτος Η τιμή ' θα τοποθετήσει το στοιχείο που αντιστοιχεί στο κοντινό τοποθετημένο γονικό στοιχείο του. Αυτή η ανάρτηση έχει εξηγήσει την απόλυτη τοποθέτηση CSS με ένα πρακτικό παράδειγμα.