Σχετική τοποθέτηση έναντι απόλυτης τοποθέτησης στο CSS: Διαφορά και σύγκριση

Ο κόσμος του CSS μας εισάγει σε μια ποικιλία όρων και προϋποθέσεων. Η CSS είναι μια σημαντική γλώσσα προγραμματισμού στην HTML (μια γλώσσα σήμανσης).

Λειτουργείται από αρκετούς επαγγελματίες ειδικούς υπολογιστών και αναλυτές υπολογιστών. Δύο όροι, η σχετική τοποθέτηση και η απόλυτη θέση, είναι στη γλώσσα προγραμματισμού του CSS.

Βασικές τακτικές

1. Η σχετική τοποθέτηση μετακινεί ένα στοιχείο σε σχέση με την αρχική του θέση χωρίς να επηρεάζει τη διάταξη άλλων στοιχείων.
2. Η απόλυτη τοποθέτηση αφαιρεί ένα στοιχείο από τη ροή του εγγράφου και το τοποθετεί σε σχέση με τον πλησιέστερο τοποθετημένο πρόγονό του.
3. Η σχετική τοποθέτηση διατηρεί τη θέση του στοιχείου στη ροή του εγγράφου, ενώ η απόλυτη τοποθέτηση μπορεί να επικαλύπτει ή να διαταράσσει άλλα στοιχεία.

Σχετική Τοποθέτηση vs Απόλυτη Τοποθέτηση Σε CSS

Η σχετική τοποθέτηση σχετίζεται με την κίνηση ενός στοιχείου μέσα σε ένα έγγραφο. Η διάταξη του εγγράφου δεν αλλάζει στη σχετική θέση. Η απόλυτη τοποθέτηση σχετίζεται με τη μετακίνηση ενός στοιχείου σε διαφορετικά έγγραφα ή από το ένα έγγραφο στο άλλο. Η διάταξη του εγγράφου μπορεί να αλλάξει σε απόλυτη τοποθέτηση.

Η σχετική τοποθέτηση στο CSS είναι ένας από τους πιο πολύτιμους όρους (που χρησιμοποιείται από αναλυτές υπολογιστών) στον προγραμματισμό.

Μετακινεί ένα στοιχείο έτσι ώστε να παραμένει σε σχέση με την αρχική του θέση. Ο όρος «συγγενής» αναφέρεται σε κάτι που μετριέται αναλογικά με το σύνολο.

Δεν αλλάζει τη διάταξη ενός εγγράφου. Μετακινεί ένα αντικείμενο προς τα αριστερά, δεξιά, πάνω και κάτω.

Το Absolute Positioning στο CSS είναι ένας πολύτιμος τύπος θέσης που σας βοηθά να τοποθετήσετε ένα στοιχείο όπου θέλετε.

Ο τύπος κίνησης είναι διακριτός (παρόμοιος με τον τύπο κινούμενης εικόνας της σχετικής θέσης). Ο κωδικός g αυτής της θέσης είναι G90. Η απόλυτη θέση τοποθετεί πάντα ένα στοιχείο σε σχέση με τον γονέα.

Αυτός ο τύπος θέσης ισχύει για στοιχεία με όνομα.

Συγκριτικός πίνακας

Παράμετροι Σύγκρισης	Σχετική τοποθέτηση σε CSS	Απόλυτη τοποθέτηση σε CSS
Λειτουργία	Η σχετική τοποθέτηση μετακινεί ένα στοιχείο είτε στην αριστερή, είτε δεξιά, πάνω ή κάτω περιοχή ενός εγγράφου.	Ο απόλυτος εντοπισμός θέσης μετακινεί ένα στοιχείο από μια ροή εγγράφου σε μια άλλη ροή εγγράφου.
Πότε να χρησιμοποιείτε	Η σχετική τοποθέτηση χρησιμοποιείται όταν το εσωτερικό στοιχείο μιας συγκεκριμένης σελίδας θα τοποθετηθεί απολύτως.	Όταν το εσωτερικό στοιχείο του στοιχείου μιας σελίδας τοποθετείται σχετικά, χρησιμοποιείται απόλυτη τοποθέτηση.
Απάντηση Native	Η σχετική τοποθέτηση είναι απόλυτη για τον γονέα.	Η απόλυτη τοποθέτηση είναι σχετική με τον γονέα.
Κανονική ροή εγγράφων	Η σχετική τοποθέτηση έχει ένα στοιχείο στην κανονική ροή εγγράφων.	Η απόλυτη τοποθέτηση αφαιρεί ένα στοιχείο από την κανονική ροή εγγράφων.
σχέδιο	Σε αυτήν την περίπτωση, η διάταξη δεν αλλάζει ή παραμένει αμετάβλητη.	Η διάταξη έχει αλλάξει στην περίπτωση της απόλυτης τοποθέτησης.

Τι είναι η σχετική τοποθέτηση στο CSS;

Η σχετική τοποθέτηση σε CSS είναι μια από τις πιο πολύτιμες τοποθετήσεις στον κόσμο του προγραμματισμού.

Αυτή η τοποθέτηση χρησιμοποιείται όταν ένα εσωτερικό στοιχείο ενός συγκεκριμένου στοιχείου πρέπει να τοποθετηθεί απολύτως.

Στη σχετική τοποθέτηση, ένα στοιχείο τοποθετείται πάντα απολύτως στον γονέα και σε σχέση με την κανονική του θέση.

Στο CSS, η σχετική τοποθέτηση αναγκάζει ένα στοιχείο να μετακινηθεί είτε αριστερά, δεξιά, κάτω ή επάνω.

Αυτός ο τύπος διάταξης θα μπορούσε να οδηγήσει σε μερικούς κενούς χώρους ή κενά που δεν μπορούν να καλυφθούν. Αυτός ο τύπος τοποθέτησης δεν αλλάζει τη διάταξη.

Πρέπει να γίνουν κατανοητές αρκετές λεπτομέρειες για να κατανοήσουμε τον όρο «σχετική τοποθέτηση». Μερικές από αυτές τις λεπτομέρειες δίνονται παρακάτω:

• Τύπος κινούμενης εικόνας – Διακριτό
• Υπολογιζόμενη τιμή – Όπως καθορίζεται
• Προεπιλεγμένη τιμή – Στατική

Η σχετική τοποθέτηση διατηρεί ένα στοιχείο εντός του κανονικού εγγράφου ροή. Η κανονική θέση ενός στοιχείου παραμένει εντός του εγγράφου, παρόμοια με μια στατική τιμή. Η CSS αναθέτει μια μοναδική ευθύνη σε αυτόν τον τύπο τοποθέτησης.

Πολλές λειτουργίες εξυπηρετούνται με σχετική τοποθέτηση. Μερικές από αυτές τις λειτουργίες είναι:

• Βοηθά στον προσδιορισμό της θέσης/θέσης ενός στοιχείου.
• Βοηθά στην προσαρμογή της θέσης ενός στοιχείου στην αρχική του θέση.
• Η σχετική τοποθέτηση δίνει σε κάποιον τη δύναμη να τοποθετήσει εσωτερικά στοιχεία (εντός ενός στοιχείου σελίδας).

Τι είναι η Απόλυτη Τοποθέτηση στο CSS;

Η απόλυτη τοποθέτηση σε CSS είναι ένας μοναδικός τύπος εντοπισμού θέσης που αλλάζει τη διάταξη μιας σελίδας.

Αυτός ο τύπος τοποθέτησης αφαιρεί ένα στοιχείο από την κανονική ροή εγγράφων. Έτσι, άλλα στοιχεία τοποθετούνται όπως το συγκεκριμένο στοιχείο δεν υπήρξε ποτέ.

Στην απόλυτη τοποθέτηση, ένα στοιχείο τοποθετείται πάντα σε σχέση με τον γονέα και απολύτως με την κανονική του θέση.

Στο CSS, η απόλυτη τοποθέτηση χρησιμοποιείται όταν ένα εσωτερικό στοιχείο της σελίδας ενός συγκεκριμένου στοιχείου πρέπει να τοποθετηθεί σχετικά. Η απόλυτη τοποθέτηση χρησιμοποιείται σε στοιχεία με όνομα.

Δεν λειτουργεί σε κλάσεις ή γενικούς τύπους στοιχείων. Η κύρια αρχή αυτού του τύπου τοποθέτησης είναι ότι λειτουργεί μόνο σε ένα στοιχείο κάθε φορά.

Αρκετοί αναλυτές υπολογιστών και ειδικοί δεν ξέρουν πώς να κεντράρουν ένα στοιχείο χρησιμοποιώντας την απόλυτη τοποθέτηση.

Παρακάτω δίνονται μερικά βήματα για το πώς να πραγματοποιήσετε το κεντράρισμα ενός στοιχείου χρησιμοποιώντας αυτόν τον τύπο τοποθέτησης:

• Προσθέστε αριστερά στα 50℅ του στοιχείου που θέλετε να κεντράρετε.
• Προσθέστε ένα αρνητικό αριστερό περιθώριο που ισούται με το μισό πλάτος του στοιχείου.
• Στη συνέχεια, προσθέστε μια κορυφή στα 50℅ του στοιχείου που θέλετε να κεντράρετε.
• Και τέλος, προσθέστε ένα αρνητικό επάνω περιθώριο που ισούται με το ήμισυ του πλάτους του εργαλείου.

Κύριες διαφορές μεταξύ της σχετικής τοποθέτησης και της απόλυτης τοποθέτησης Σε CSS

1. Η σχετική τοποθέτηση είναι απόλυτη για τη μητρική της, ενώ, από την άλλη πλευρά, η απόλυτη τοποθέτηση είναι σχετική με τη μητρική της.
2. Η σχετική τοποθέτηση μετακινεί ένα στοιχείο με μια συγκεκριμένη διάταξη εγγράφου, ενώ, από την άλλη πλευρά, η απόλυτη τοποθέτηση μετακινεί ένα στοιχείο από το ένα έγγραφο στο άλλο.
3. Η διάταξη παραμένει ίδια στην περίπτωση σχετικής τοποθέτησης, ενώ από την άλλη, η απόλυτη τοποθέτηση αλλάζει τη διάταξη.
4. Το στοιχείο παραμένει εντός της κανονικής ροής εγγράφου σε σχέση με, ενώ από την άλλη πλευρά, σε απόλυτη τοποθέτηση, το στοιχείο αφαιρείται από την κανονική ροή εγγράφων.
5. Στη σχετική τοποθέτηση, το εσωτερικό στοιχείο τοποθετείται σχετικά, ενώ, από την άλλη πλευρά, στην απόλυτη τοποθέτηση, το εσωτερικό στοιχείο τοποθετείται απόλυτα.

αναφορές

1. https://dl.acm.org/doi/abs/10.1145/1067170.1067190
2. https://link.springer.com/article/10.1007/PL00012910

Τελευταία ενημέρωση: 26 Ιουλίου, 2023