Η τοποθέτηση του CSS υπήρξε από καιρό σημαντικό μέρος της δημιουργίας διατάξεων ιστότοπου. Ακόμη και με την άνοδο των τεχνικών διάταξης CSS όπως το Flexbox και το CSS Grid, η τοποθέτηση εξακολουθεί να έχει σημαντική θέση σε κάθε κόλπο σχεδιαστών ιστοσελίδων. Όταν χρησιμοποιείτε την τοποθέτηση θέσης CSS, το πρώτο πράγμα που πρέπει να κάνετε είναι να ορίσετε την ιδιότητα CSS για τη θέση για να πείτε στο πρόγραμμα περιήγησης εάν πρόκειται να χρησιμοποιήσετε απόλυτη ή σχετική τοποθέτηση για ένα δεδομένο στοιχείο. Πρέπει επίσης να κατανοήσετε τη διαφορά μεταξύ αυτών των δύο ιδιοτήτων τοποθέτησης. Ενώ οι απόλυτες και σχετικές είναι οι δύο ιδιότητες θέσης CSS που χρησιμοποιούνται πιο συχνά στο σχεδιασμό ιστοσελίδων, στην πραγματικότητα υπάρχουν τέσσερις καταστάσεις στην ιδιότητα θέσης:
- στατικός
- απόλυτος
- συγγενής
- σταθερός
Στατική τοποθέτηση
Στατική είναι η προεπιλεγμένη θέση για οποιοδήποτε στοιχείο σε μια ιστοσελίδα. Εάν δεν ορίσετε τη θέση ενός στοιχείου, είναι στατικό, πράγμα που σημαίνει ότι εμφανίζεται στην οθόνη με βάση το πού βρίσκεται στο έγγραφο HTML και πώς εμφανίζεται μέσα στην κανονική ροή αυτού του εγγράφου. Εάν εφαρμόζετε κανόνες τοποθέτησης όπως μπλουζα ή αριστερά σε ένα στοιχείο που έχει στατική θέση, αυτοί οι κανόνες αγνοούνται και το στοιχείο παραμένει εκεί που εμφανίζεται στην κανονική ροή εγγράφου. Σπάνια, αν ποτέ, πρέπει να ορίσετε ένα στοιχείο σε μια στατική θέση στο CSS, επειδή είναι η προεπιλεγμένη τιμή.
Απόλυτη τοποθέτηση CSS
Η απόλυτη τοποθέτηση είναι ίσως η ευκολότερη θέση CSS που κατανοεί. Ξεκινάτε με αυτήν την ιδιότητα θέσης CSS: position: absolute;
Αυτή η τιμή λέει στο πρόγραμμα περιήγησης ότι ό, τι πρόκειται να τοποθετηθεί θα πρέπει να αφαιρεθεί από την κανονική ροή του εγγράφου και αντί να τοποθετηθεί σε μια ακριβή τοποθεσία στη σελίδα. Αυτό υπολογίζεται με βάση τον πλησιέστερο μη στατικά τοποθετημένο πρόγονο αυτού του στοιχείου. Επειδή ένα απόλυτα τοποθετημένο στοιχείο αφαιρείται από την κανονική ροή του εγγράφου, επηρεάζει τον τρόπο με τον οποίο τα στοιχεία πριν από αυτό ή μετά το HTML τοποθετούνται στην ιστοσελίδα. Για παράδειγμα, εάν έχετε μια διαίρεση που τοποθετείται χρησιμοποιώντας μια τιμή σχετικής και εντός αυτής της διαίρεσης, έχετε μια παράγραφο που θέλετε να τοποθετήσετε 50 εικονοστοιχεία από την κορυφή της διαίρεσης, προσθέτετε μια τιμή θέσης απόλυτος σε αυτήν την παράγραφο μαζί με μια τιμή αντιστάθμισης του 50 εικονοστοιχεία στο μπλουζα ιδιοκτησία, ως εξής: θέση: απόλυτο;
κορυφή: 50 εικονοστοιχεία;
Αυτό το απόλυτα τοποθετημένο στοιχείο εμφανίζει πάντα 50 pixel από την κορυφή αυτής της σχετικά τοποθετημένης διαίρεσης, ανεξάρτητα από το τι άλλο εμφανίζεται εκεί σε κανονική ροή. Το απόλυτα τοποθετημένο στοιχείο σας χρησιμοποιεί το σχετικά τοποθετημένο ως πλαίσιο, και η τιμή τοποθέτησης που χρησιμοποιείτε είναι σχετική με αυτήν. Οι τέσσερις ιδιότητες τοποθέτησης που έχετε στη διάθεσή σας είναι:
- μπλουζα
- σωστά
- κάτω μέρος
- αριστερά
Μπορείτε να χρησιμοποιήσετε είτε μπλουζα ή κάτω μέρος – δεδομένου ότι ένα στοιχείο δεν μπορεί να τοποθετηθεί σύμφωνα με τις δύο αυτές τιμές – και είτε σωστά ή αριστερά. Εάν ένα στοιχείο έχει οριστεί σε απόλυτη θέση, αλλά δεν έχει μη στατικά τοποθετημένους προγόνους, τότε τοποθετείται σε σχέση με το στοιχείο σώματος, το οποίο είναι το υψηλότερο επίπεδο της σελίδας.
Σχετική τοποθέτηση
Η σχετική τοποθέτηση χρησιμοποιεί τις ίδιες τέσσερις ιδιότητες τοποθέτησης με την απόλυτη τοποθέτηση, αλλά αντί να βασίζει τη θέση του στοιχείου στον πλησιέστερο μη στατικά τοποθετημένο πρόγονό του, ξεκινά από το σημείο όπου θα ήταν το στοιχείο εάν ήταν ακόμα στην κανονική ροή. Για παράδειγμα, εάν έχετε τρεις παραγράφους στην ιστοσελίδα σας και η τρίτη έχει ένα θέση: σχετική στυλ τοποθετημένο πάνω του, η θέση του αντισταθμίζεται με βάση την τρέχουσα θέση του.
Παράγραφος 1.
Παράγραφος 2.
Παράγραφος 3. Στο παραπάνω παράδειγμα, η τρίτη παράγραφος είναι τοποθετημένη 2em από την αριστερή πλευρά του στοιχείου εμπορευματοκιβωτίου αλλά εξακολουθεί να είναι κάτω από τις δύο πρώτες παραγράφους. Παραμένει στην κανονική ροή του εγγράφου και αντισταθμίζεται ελαφρώς. Εάν το αλλάξετε σε θέση: απόλυτη, οτιδήποτε ακολουθεί εμφανίζεται πάνω του επειδή δεν είναι πλέον στην κανονική ροή του εγγράφου. Τα στοιχεία σε μια ιστοσελίδα χρησιμοποιούνται συχνά για να ορίσουν μια τιμή θέση: σχετική χωρίς καθορισμένη τιμή μετατόπισης, πράγμα που σημαίνει ότι το στοιχείο παραμένει ακριβώς εκεί που θα εμφανίζεται σε κανονική ροή. Αυτό γίνεται αποκλειστικά για να καθοριστεί αυτό το στοιχείο ως πλαίσιο στο οποίο άλλα στοιχεία μπορούν να τοποθετηθούν απολύτως. Για παράδειγμα, εάν έχετε ένα τμήμα που περιβάλλει ολόκληρο τον ιστότοπό σας με τιμή κλάσης δοχείο, το οποίο είναι ένα κοινό σενάριο στο σχεδιασμό ιστοσελίδων, το οποίο μπορεί να ρυθμιστεί σε μια θέση συγγενής έτσι ώστε οτιδήποτε μέσα του μπορεί να το χρησιμοποιήσει ως περιβάλλον εντοπισμού θέσης.
Τι γίνεται με τη σταθερή τοποθέτηση;
Η σταθερή τοποθέτηση μοιάζει πολύ με την απόλυτη τοποθέτηση. Η θέση του στοιχείου υπολογίζεται με τον ίδιο τρόπο όπως το απόλυτο μοντέλο, αλλά σταθερά στοιχεία στη συνέχεια στερεώνονται σε αυτήν τη θέση – σχεδόν σαν υδατογράφημα. Στη συνέχεια, όλα τα υπόλοιπα της σελίδας μεταβαίνουν σε αυτό το στοιχείο. Για να χρησιμοποιήσετε αυτήν την τιμή ιδιότητας, ορίσατε: position: fixed;
Λάβετε υπόψη ότι όταν διορθώνετε ένα στοιχείο στον ιστότοπό σας, εκτυπώνεται σε αυτήν τη θέση όταν εκτυπώνεται η ιστοσελίδα σας. Για παράδειγμα, εάν το στοιχείο σας είναι σταθερό στο επάνω μέρος της σελίδας σας, θα εμφανίζεται στο πάνω μέρος κάθε εκτυπωμένης σελίδας, επειδή είναι σταθερό στην κορυφή της σελίδας. Μπορείτε να χρησιμοποιήσετε τύπους μέσων για να αλλάξετε τον τρόπο με τον οποίο οι εκτυπωμένες σελίδες εμφανίζουν σταθερά στοιχεία: @media screen {
h1 # πρώτη {θέση: σταθερή; }
}
@media print {
h1 # πρώτη {θέση: στατική; }
}
Αναφέρετε αυτό το άρθρο
Μορφή mla apa chicago Η αναφορά σας
Kyrnin, Jennifer. «Απόλυτη έναντι σχετικής – Εξηγώντας την τοποθέτηση CSS.» ThoughtCo, Μάιος. 14, 2021, thinkco.com/absolute-vs-relative-3466208.
Kyrnin, Jennifer. (2021, 14 Μαΐου). Απόλυτη έναντι σχετικής – Εξηγώντας την τοποθέτηση CSS. Ανακτήθηκε από το https://www.thoughtco.com/absolute-vs-relative-3466208
Kyrnin, Jennifer. «Απόλυτη έναντι σχετικής – Εξηγώντας την τοποθέτηση CSS.» ThoughtCo. https://www.thoughtco.com/absolute-vs-relative-3466208 (πρόσβαση στις 16 Μαΐου 2021).
αντιγραφή παραπομπής