Τα top, bottom, left, και rightοι ιδιότητες που χρησιμοποιούνται με τη θέση για να ρυθμίσετε την τοποθέτηση ενός στοιχείου. Έχουν μόνο επίδραση στα στοιχεία που είναι τοποθετημένα, τα οποία είναι στοιχεία με την positionιδιότητα να ορίζεται σε οτιδήποτε άλλο static. Για παράδειγμα: relative, absolute, fixed, ή sticky.
div ( : || || auto || inherit; )Μπορείτε να το χρησιμοποιήσετε, για παράδειγμα, για να ωθήσετε ένα εικονίδιο στη θέση του:
button .icon ( position: relative; top: 1px; )Ή τοποθετήστε ένα ειδικό στοιχείο μέσα σε ένα δοχείο.
.container ( position: relative; ) .container header ( position: absolute; top: 0; )Η τιμή για top, bottomκαι leftκαι rightμπορεί να είναι οποιοδήποτε από τα ακόλουθα:
- οποιοδήποτε από τα έγκυρα μήκη του CSS
- ένα ποσοστό του ύψους (για
topκαιbottom) ή του πλάτους του περιέχοντος στοιχείου (γιαleftκαιright) autoinherit
Το στοιχείο γενικά θα απομακρυνθεί από μια δεδομένη πλευρά όταν η τιμή του είναι θετική και προς αυτήν όταν η τιμή είναι αρνητική. Στο παρακάτω παράδειγμα, ένα θετικό μήκος για την topκίνηση του στοιχείου προς τα κάτω (μακριά από την κορυφή) και ένα αρνητικό μήκος για την topκίνηση του στοιχείου προς τα πάνω (προς την κορυφή):
Δείτε το Pen
Top: θετικές και αρνητικές τιμές από τον Matsuko Friedland (@missmatsuko)
στο CodePen.
Θέση
Η τοποθέτηση ενός στοιχείου με μια τιμή για top, bottom, left, ή rightεξαρτάται από την αξία του σε position. Ας ρίξουμε μια ματιά στο τι συμβαίνει όταν ορίζουμε την ίδια τιμή για topστοιχεία με διαφορετικές τιμές για position.
static
Η topιδιότητα δεν επηρεάζει στοιχεία που δεν έχουν τοποθετηθεί (στοιχεία με το positionσετ static). Έτσι τοποθετούνται τα στοιχεία από προεπιλογή. Θα μπορούσατε να χρησιμοποιήσετε position: static;ως μία μέθοδο για να αναιρέσετε την επίδραση topσε ένα στοιχείο.
relative
Όταν topέχει οριστεί σε ένα στοιχείο με το positionσε relative, το στοιχείο θα μετακινηθεί πάνω ή κάτω σε σχέση με την αρχική του τοποθέτηση στο έγγραφο.
Δείτε το Pen
Top: συγγενής του Matsuko Friedland (@missmatsuko)
στο CodePen.
absolute
Όταν topείναι τοποθετημένο σε ένα στοιχείο με positionσετ absolute, το στοιχείο θα μετακινηθεί προς τα πάνω ή προς τα κάτω σε σχέση με τον κοντινότερο προγονικό του (ή το έγγραφο, εάν δεν υπάρχουν τοποθετημένοι πρόγονοι).
Σε αυτήν την επίδειξη, το ροζ κουτί στα αριστερά τοποθετείται 50 εικονοστοιχεία κάτω από την κορυφή της σελίδας, επειδή δεν έχει στοιχεία προγόνων. Το ροζ κουτί στα δεξιά βρίσκεται 50px κάτω από την κορυφή της μητρικής της, διότι η μητρική έχει μια positionτης relative.
Δείτε το Pen
Top: απόλυτο από τον Matsuko Friedland (@missmatsuko)
στο CodePen.
fixed
Όταν topέχει ρυθμιστεί σε ένα στοιχείο με το positionσε fixed, το στοιχείο θα μετακινηθεί πάνω ή κάτω σε σχέση με τη θύρα προβολής του προγράμματος περιήγησης.
Δείτε το Pen
Top: διορθώθηκε από CSS-Tricks (@ css-tricks)
στο CodePen.
Με την πρώτη ματιά, μπορεί να φαίνεται ότι δεν υπάρχει διαφορά μεταξύ absoluteκαι fixed. Η διαφορά μπορεί να φανεί όταν τις συγκρίνετε σε μια σελίδα που έχει αρκετό περιεχόμενο για κύλιση. Καθώς κάνετε κύλιση προς τα κάτω, το fixedστοιχείο θέσης είναι πάντα σε προβολή, ενώ το absoluteστοιχείο θέσης μετακινείται προς τα έξω.
Δείτε το Pen
Scrolling: fixed vs. absolute από CSS-Tricks (@ css-tricks)
στο CodePen.
sticky
Όταν topείναι τοποθετημένο σε ένα στοιχείο με positionσετ sticky, το στοιχείο θα μετακινηθεί προς τα πάνω ή προς τα κάτω σε σχέση με τον πλησιέστερο πρόγονο με ένα πλαίσιο κύλισης (ή τη θύρα προβολής, εάν κανένας πρόγονος δεν έχει πλαίσιο κύλισης), περιοριζόμενος στα όρια του στοιχείου που περιέχει.
Η ρύθμιση topσε ένα stickyστοιχείο που έχει τοποθετηθεί δεν κάνει πολλά, εκτός αν το κοντέινερ του είναι ψηλότερο από ό, τι είναι και έχετε αρκετό περιεχόμενο για κύλιση. Όπως και με fixed, το στοιχείο θα παραμείνει σε προβολή κατά την κύλιση. Σε αντίθεση με αυτό fixed, το στοιχείο δεν θα βλέπει μόλις φτάσει στις άκρες του περιέχοντος στοιχείου.
Δείτε το Pen
Scrolling:
fix vs. sticky από CSS-Tricks (@ css-tricks) στο CodePen.
Γκότσα
Ρύθμιση αντίθετων πλευρών
Μπορείτε να ορίσετε μια τιμή για καθένα από τα top, bottom, leftκαι rightσε ένα μόνο στοιχείο. Όταν ορίζετε τιμές για αντίθετες πλευρές ( topκαι bottom, ή leftκαι right), το αποτέλεσμα μπορεί να μην είναι πάντα αυτό που περιμένετε.
Στις περισσότερες περιπτώσεις, bottomαγνοείται εάν topέχει ήδη ρυθμιστεί και rightαγνοείται εάν leftέχει ήδη ρυθμιστεί. Όταν η κατεύθυνση έχει οριστεί σε rtl(δεξιά προς αριστερά), leftαγνοείται αντί right. Προκειμένου κάθε τιμή να έχει αποτέλεσμα, το στοιχείο πρέπει να έχει ένα positionσύνολο absoluteή fixedκαι να έχει heightοριστεί σε auto(προεπιλογή).
Σε αυτό το παράδειγμα, ορίζουμε top, bottomκαι left, rightσε "20px", και αναμένουμε ότι κάθε πλευρά του εσωτερικού κουτιού θα είναι 20px μακριά από τις πλευρές του εξωτερικού κουτιού:
Δείτε το Pen
Setting πάνω, κάτω, αριστερά και δεξιά από CSS-Tricks (@ css-tricks)
στο CodePen.
Όταν διορθώνεται δεν σχετίζεται με τη θύρα προβολής
Τα στοιχεία με το positionσετ fixedδεν τοποθετούνται πάντα σε σχέση με τη θύρα προβολής. Θα πρέπει να τοποθετηθεί σε σχέση με το πιο κοντινό πρόγονο του με ένα transform, perspectiveή filterσύνολο περιουσίας σε οτιδήποτε άλλο εκτός none, αν υπάρχει.
Προσθήκη ή αφαίρεση χώρου
Εάν έχετε τοποθετήσει ένα στοιχείο και διαπιστώσετε ότι υπάρχει τώρα ένας κενός χώρος ή όχι αρκετός χώρος που περιμένατε, μπορεί να έχει σχέση με το αν το στοιχείο βρίσκεται εντός ή εκτός της ροής του εγγράφου.
Όταν ένα στοιχείο αφαιρείται από τη ροή του εγγράφου, αυτό σημαίνει ότι ο χώρος που καταλάμβανε αρχικά στη σελίδα εξαφανίζεται. Αυτό συμβαίνει όταν ένα στοιχείο τοποθετείται absoluteή fixed. Σε αυτό το παράδειγμα, το κουτί που περιέχει το στοιχείο απόλυτα τοποθετημένο έχει καταρρεύσει επειδή το απόλυτα τοποθετημένο στοιχείο αφαιρέθηκε από τη ροή του εγγράφου:
Δείτε τη
ροή του εγγράφου στυλό από τον Matsuko Friedland (@missmatsuko)
στο CodePen.
Υποστήριξη προγράμματος περιήγησης
Μπορείτε να ρίξετε μια ματιά, αλλά δεν υπάρχουν ανησυχίες μεταξύ των προγραμμάτων περιήγησης για την topιδιοκτησία. Χρησιμοποιήστε κατά βούληση.