Η τοποθέτηση CSS είναι κάτι παραπάνω από απλά X, Y Συντεταγμένες
Η τοποθέτηση CSS αποτελεί από καιρό ένα σημαντικό μέρος της δημιουργίας σχεδίων ιστοσελίδας. Ακόμα και με την άνοδο των νεώτερων τεχνικών διάταξης CSS όπως το Flexbox και το CSS Grid, η τοποθέτηση έχει ακόμα μια σημαντική θέση σε κάθε τσάντα σχεδιαστή ιστοσελίδων.
Όταν χρησιμοποιείτε την τοποθέτηση CSS, το πρώτο πράγμα που θα πρέπει να κάνετε είναι να δημιουργήσετε την ιδιότητα CSS για να δώσετε εντολή στο πρόγραμμα περιήγησης αν πρόκειται να χρησιμοποιήσετε απόλυτη ή σχετική θέση για ένα συγκεκριμένο στοιχείο. Πρέπει επίσης να κατανοήσετε ξεκάθαρα τη διαφορά μεταξύ αυτών των δύο ιδιοτήτων τοποθέτησης.
Ενώ οι απόλυτες και σχετικές είναι οι δύο ιδιότητες θέσης CSS που χρησιμοποιούνται συχνότερα στον σχεδιασμό ιστοσελίδων, υπάρχουν στην πραγματικότητα τέσσερις καταστάσεις στην ιδιότητα θέσης:
- στατικός
- απόλυτος
- συγγενής
- σταθερός
Η στατική είναι η προεπιλεγμένη θέση για οποιοδήποτε στοιχείο σε μια ιστοσελίδα. Αν δεν καθορίσετε τη θέση ενός στοιχείου, θα είναι στατική. Αυτό σημαίνει ότι θα εμφανίζεται στην οθόνη βάσει του τόπου στο έγγραφο HTML και του τρόπου με τον οποίο θα εμφανίζεται μέσα στην κανονική ροή του εγγράφου.
Εάν εφαρμόζετε κανόνες εντοπισμού θέσης όπως πάνω ή αριστερά σε ένα στοιχείο που έχει στατική θέση, οι κανόνες αυτοί θα αγνοηθούν και το στοιχείο θα παραμείνει εκεί όπου εμφανίζεται σε κανονική ροή εγγράφων. Στην πραγματικότητα, θα πρέπει σπάνια, αν ποτέ, να θέσετε ένα στοιχείο σε μια στατική θέση στο CSS, αφού αυτή είναι η προεπιλεγμένη τιμή.
Απόλυτη τοποθέτηση CSS
Η απόλυτη τοποθέτηση είναι ίσως η πιο εύκολη θέση του CSS να καταλάβει. Αρχίζετε με αυτήν την ιδιότητα θέσης CSS:
θέση: απόλυτη;Αυτή η τιμή λέει στο πρόγραμμα περιήγησης ότι ό, τι πρόκειται να τοποθετηθεί πρέπει να αφαιρεθεί από την κανονική ροή του εγγράφου και να τοποθετηθεί σε μια ακριβή τοποθεσία στη σελίδα. Αυτό υπολογίζεται βάσει του πλησιέστερου μη στατικού τοποθετημένου προγόνου αυτού του στοιχείου.
Επειδή ένα απολύτως τοποθετημένο στοιχείο αφαιρείται από την κανονική ροή του εγγράφου, δεν θα επηρεάσει τον τρόπο με τον οποίο τα στοιχεία πριν ή μετά από αυτό στην HTML τοποθετούνται στην ιστοσελίδα.
Για παράδειγμα, εάν είχατε μια διαίρεση που είχε τοποθετηθεί χρησιμοποιώντας μια τιμή σχετικής (θα εξετάσουμε αυτή την τιμή σύντομα) και μέσα σε αυτή τη διαίρεση είχατε μια παράγραφο που θέλατε να τοποθετήσετε 50 pixels από την κορυφή της διαίρεσης, εσείς θα προσθέσει μια τιμή θέσης "απόλυτη" σε αυτή την παράγραφο μαζί με μια τιμή μετατόπισης των 50px στην ιδιότητα "top", όπως αυτή.
θέση: απόλυτη; κορυφή: 50px;Αυτό το απολύτως τοποθετημένο στοιχείο θα έδειχνε πάντοτε πάντα 50 pixel από την κορυφή εκείνης της σχετικά τοποθετημένης διαίρεσης - ανεξάρτητα από τι άλλο εμφανίζει εκεί σε κανονική ροή. Το "απόλυτα" τοποθετημένο στοιχείο σας χρησιμοποίησε το σχετικώς τοποθετημένο ως το περιβάλλον του και η τιμή θέσης που χρησιμοποιείτε είναι σχετική.
Οι τέσσερις ιδιότητες τοποθέτησης που έχετε στη διάθεσή σας είναι:
- μπλουζα
- σωστά
- κάτω μέρος
- αριστερά
Μπορείτε να χρησιμοποιήσετε το πάνω ή το κάτω μέρος (δεδομένου ότι ένα στοιχείο δεν μπορεί να τοποθετηθεί σύμφωνα με τις δύο αυτές τιμές) και δεξιά ή αριστερά.
Εάν ένα στοιχείο έχει οριστεί σε απόλυτη θέση, αλλά εκεί δεν έχει μη στατικά τοποθετημένους προγόνους, τότε θα τοποθετηθεί σε σχέση με το στοιχείο του σώματος, το οποίο είναι το στοιχείο υψηλότερου επιπέδου της σελίδας.
Σχετική τοποθέτηση
Αναφέραμε ήδη σχετική τοποθέτηση, οπότε ας δούμε αυτή την ιδιοκτησία τώρα.
Η σχετική τοποθέτηση χρησιμοποιεί τις ίδιες τέσσερις ιδιότητες τοποθέτησης με την απόλυτη τοποθέτηση, αλλά αντί να στηρίζει τη θέση του στοιχείου στον πλησιέστερο μη στατικό τοποθετημένο πρόγονο του, ξεκινά από εκεί όπου το στοιχείο θα ήταν αν ήταν ακόμα στην κανονική ροή.
Για παράδειγμα, εάν έχετε τρεις παραγράφους στην ιστοσελίδα σας και η τρίτη έχει τοποθετηθεί στυλ "θέση: σχετική", η θέση της θα αντισταθμίζεται με βάση την τρέχουσα θέση της.
Παράγραφος 1
Παράγραφος 2
Στο παραπάνω παράδειγμα, η τρίτη παράγραφο θα τοποθετηθεί 2εμ από την αριστερή πλευρά του στοιχείου δοχείου, αλλά θα είναι ακόμα κάτω από τις δύο πρώτες παραγράφους. Θα παραμείνει στη φυσιολογική ροή του εγγράφου και απλά θα μετατοπιστεί ελαφρά. Εάν το αλλάξατε στη θέση: απόλυτη. οτιδήποτε ακολουθεί θα εμφανιζόταν επάνω του, επειδή δεν θα ήταν πλέον στην κανονική ροή του εγγράφου.
Τα στοιχεία μιας ιστοσελίδας χρησιμοποιούνται συχνά για να ορίσουν μια τιμή θέσης: σχετική χωρίς καθιερωμένη τιμή μετατόπισης, πράγμα που σημαίνει ότι το στοιχείο παραμένει ακριβώς εκεί που θα εμφανιζόταν στην κανονική ροή. Αυτό γίνεται μόνο για να καθιερωθεί αυτό το στοιχείο ως ένα πλαίσιο στο οποίο μπορούν να τοποθετηθούν απολύτως άλλα στοιχεία. Για παράδειγμα, εάν έχετε μια διαίρεση που περιβάλλει ολόκληρο τον ιστότοπό σας με μια τιμή κλάσης "δοχείο" (που είναι ένα πολύ συνηθισμένο σενάριο στον σχεδιασμό ιστού), αυτή η διαίρεση μπορεί να οριστεί σε μια σχετική θέση, έτσι ώστε οτιδήποτε εντός της μπορεί να χρησιμοποιήσει ως ένα πλαίσιο τοποθέτησης.
Τι γίνεται με τη σταθερή τοποθέτηση;
Η σταθερή τοποθέτηση είναι σαν την απόλυτη τοποθέτηση. Η θέση του στοιχείου υπολογίζεται με τον ίδιο τρόπο όπως το απόλυτο μοντέλο, αλλά σταθερά στοιχεία σταθεροποιούνται στη θέση αυτή - σχεδόν σαν υδατογράφημα . Όλα τα υπόλοιπα στη σελίδα θα μετακινηθούν μετά από αυτό το στοιχείο.
Για να χρησιμοποιήσετε αυτήν την τιμή ιδιότητας, θα ορίσετε:
θέση: σταθερή.Λάβετε υπόψη ότι όταν διορθώσετε ένα στοιχείο στη θέση του στον ιστότοπό σας, θα εκτυπωθεί σε αυτή τη θέση όταν εκτυπωθεί η ιστοσελίδα σας. Για παράδειγμα, εάν το στοιχείο σας έχει επιδιορθωθεί στο επάνω μέρος της σελίδας σας, θα εμφανίζεται στο επάνω μέρος κάθε εκτυπωμένης σελίδας - επειδή έχει διορθωθεί στο επάνω μέρος της σελίδας. Μπορείτε να χρησιμοποιήσετε τους τύπους μέσων για να αλλάξετε τον τρόπο εμφάνισης των σταθερών στοιχείων στις εκτυπωμένες σελίδες :
οθόνη @media {h1 # first {position: fixed; }} @media print {h1 # πρώτη {θέση: στατική; }}Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard την 1/7/16.