Απόλυτη έναντι σχετικής - Επεξήγηση θέσης CSS

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

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

Ενώ οι απόλυτες και σχετικές είναι οι δύο ιδιότητες θέσης CSS που χρησιμοποιούνται συχνότερα στον σχεδιασμό ιστοσελίδων, υπάρχουν στην πραγματικότητα τέσσερις καταστάσεις στην ιδιότητα θέσης:

• στατικός
• απόλυτος
• συγγενής
• σταθερός

Στατική τοποθέτηση

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

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

Απόλυτη τοποθέτηση CSS

Η απόλυτη τοποθέτηση είναι ίσως η πιο εύκολη θέση του CSS να καταλάβει. Αρχίζετε με αυτήν την ιδιότητα θέσης CSS:

θέση: απόλυτη;

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

Για παράδειγμα, αν έχετε ένα τμήμα που είναι τοποθετημένο χρησιμοποιώντας μια τιμή σχετικής και μέσα σε αυτή τη διαίρεση, έχετε μια παράγραφο που θέλετε να τοποθετήσετε 50 εικονοστοιχεία από την κορυφή της διαίρεσης, προσθέτετε μια τιμή θέσης απόλυτος σε αυτή την παράγραφο μαζί με μια τιμή αντιστάθμισης 50px στο μπλουζα ιδιοκτησία, όπως αυτό:

θέση: απόλυτη;κορυφή: 50px;

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

Οι τέσσερις ιδιότητες τοποθέτησης που έχετε στη διάθεσή σας είναι:

• μπλουζα
• σωστά
• κάτω μέρος
• αριστερά

Μπορείτε να χρησιμοποιήσετε είτε μπλουζα ή κάτω μέρος - καθώς ένα στοιχείο δεν μπορεί να τοποθετηθεί σύμφωνα με τις δύο αυτές τιμές - και είτε σωστά ή αριστερά.

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

Σχετική τοποθέτηση

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

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

Παράγραφος 1.

Παράγραφος 2.

Παράγραφος 3.

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

Τα στοιχεία μιας ιστοσελίδας χρησιμοποιούνται συχνά για να ορίσετε μια τιμή θέση: σχετική χωρίς να έχει καθοριστεί τιμή αντιστάθμισης, πράγμα που σημαίνει ότι το στοιχείο παραμένει ακριβώς εκεί που θα εμφανιζόταν στην κανονική ροή. Αυτό γίνεται μόνο για να καθιερωθεί αυτό το στοιχείο ως ένα πλαίσιο στο οποίο μπορούν να τοποθετηθούν απολύτως άλλα στοιχεία. Για παράδειγμα, εάν έχετε ένα τμήμα που περιβάλλει ολόκληρο τον ιστότοπό σας με τιμή κλάσης δοχείο, το οποίο είναι ένα συνηθισμένο σενάριο στον σχεδιασμό ιστοσελίδων, ότι η διαίρεση μπορεί να οριστεί σε μια θέση συγγενής έτσι ώστε οτιδήποτε μέσα από αυτό να μπορεί να το χρησιμοποιήσει ως περιβάλλον τοποθέτησης.

Τι γίνεται με τη σταθερή τοποθέτηση;

Η σταθερή τοποθέτηση είναι σαν την απόλυτη τοποθέτηση. Η θέση του στοιχείου υπολογίζεται με τον ίδιο τρόπο όπως το απόλυτο μοντέλο, αλλά σταθερά στοιχεία σταθεροποιούνται στη θέση αυτή - σχεδόν σαν υδατογράφημα. Όλα τα υπόλοιπα στη σελίδα περιστρέφονται πέρα ​​από αυτό το στοιχείο.

Για να χρησιμοποιήσετε αυτήν την τιμή ιδιότητας, ορίζετε:

θέση: σταθερή.

Λάβετε υπόψη ότι όταν διορθώσετε ένα στοιχείο στη θέση του στον ιστότοπό σας, εκτυπώνεται σε εκείνη την τοποθεσία όταν εκτυπώνεται η ιστοσελίδα σας. Για παράδειγμα, εάν το στοιχείο σας έχει επιδιορθωθεί στο επάνω μέρος της σελίδας σας, θα εμφανίζεται στο επάνω μέρος κάθε εκτυπωμένης σελίδας, επειδή έχει διορθωθεί στο επάνω μέρος της σελίδας. Μπορείτε να χρησιμοποιήσετε τους τύπους μέσων για να αλλάξετε τον τρόπο εμφάνισης των σταθερών στοιχείων στις εκτυπωμένες σελίδες:

@media screen { h1 # πρώτη {θέση: σταθερή; }} } @media print { h1 # πρώτη {θέση: στατική; }} }