Θέση - CSS-Κόλπα | CSS Almanac 2025

Η positionιδιότητα μπορεί να σας βοηθήσει να χειριστείτε τη θέση ενός στοιχείου, για παράδειγμα:

.element ( position: relative; top: 20px; )

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

relativeείναι μόνο μία από τις έξι τιμές για το positionακίνητο. Εδώ είναι οι άλλοι:

Αξίες

static: κάθε στοιχείο έχει μια στατική θέση από προεπιλογή, επομένως το στοιχείο θα κολλήσει στην κανονική ροή σελίδας. Αν λοιπόν υπάρχει ένα σύνολο αριστερού / δεξιού / άνω / κάτω / ευρετηρίου z τότε δεν θα υπάρχει επίδραση σε αυτό το στοιχείο.
relative: η αρχική θέση ενός στοιχείου παραμένει στη ροή του εγγράφου, ακριβώς όπως η staticτιμή. Αλλά τώρα αριστερά / δεξιά / πάνω / κάτω / z-index θα λειτουργήσει. Οι ιδιότητες θέσης "ωθούν" το στοιχείο από την αρχική θέση προς αυτήν την κατεύθυνση.
absolute: το στοιχείο αφαιρείται από τη ροή του εγγράφου και άλλα στοιχεία θα συμπεριφέρονται σαν να μην είναι καν εκεί, ενώ όλες οι άλλες ιδιότητες θέσης θα λειτουργήσουν σε αυτό.
fixed: το στοιχείο αφαιρείται από τη ροή του εγγράφου όπως τα στοιχεία που έχουν τοποθετηθεί σε απόλυτη θέση. Στην πραγματικότητα συμπεριφέρονται σχεδόν τα ίδια, μόνο τα στοιχεία σταθερής θέσης είναι πάντα σχετικά με το έγγραφο, όχι με κάποιο συγκεκριμένο γονέα και δεν επηρεάζονται από την κύλιση.
sticky(πειραματικό): το στοιχείο αντιμετωπίζεται ως relativeτιμή έως ότου η θέση κύλισης της θύρας προβολής φτάσει σε ένα καθορισμένο κατώφλι, στο σημείο αυτό το στοιχείο παίρνει μια fixedθέση όπου του λέγεται να κολλήσει.
inherit: η positionτιμή δεν καταρρέει, οπότε αυτό μπορεί να χρησιμοποιηθεί για να την αναγκάσει συγκεκριμένα και inheritτην τιμή τοποθέτησης από τον γονέα της.

Απόλυτος

Εάν ένα θυγατρικό στοιχείο έχει absoluteτιμή, τότε το γονικό στοιχείο θα συμπεριφέρεται σαν να μην υπάρχει καθόλου το παιδί:

.element ( position: absolute; )

Και όταν προσπαθούμε να ορίσετε άλλες αξίες, όπως left, bottomκαι rightθα διαπιστώσετε ότι το στοιχείο παιδί δεν ανταποκρίνεται στις διαστάσεις της μητρικής της, αλλά το έγγραφο:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

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

.parent ( position: relative; )

Τώρα ιδιότητες όπως left, right, bottomκαι topθα αναφερθώ στο γονικό στοιχείο, έτσι ώστε αν κάνουμε το θυγατρικό στοιχείο διαφανές μπορούμε να δούμε να κάθεται στο κάτω μέρος της μητρικής:

Σταθερός

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

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

Επιφάνεια εργασίας

Χρώμιο	Firefox	ΙΕ	Ακρη	Σαφάρι
4	2	7	12	3.1

Κινητό / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3	8

Κολλώδης

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

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

Πάρτε το ακόλουθο παράδειγμα:

.element ( position: sticky; top: 50px; )

Το στοιχείο θα είναι σχετικά τοποθετημένο έως ότου η θέση κύλισης της θύρας προβολής φτάσει σε σημείο όπου το στοιχείο θα είναι 50pxαπό την κορυφή της θύρας προβολής. Σε εκείνο το σημείο, το στοιχείο καθίσταται κολλώδης και παραμένει σε μία fixedθέση 50pxπάνω μέρος της οθόνης.

Η ακόλουθη επίδειξη απεικονίζει αυτό το σημείο, όπου η κορυφή πλοήγησης είναι η προεπιλεγμένη relativeθέση και η δεύτερη πλοήγηση έχει οριστεί στην stickyκορυφή της θύρας προβολής. Λάβετε υπόψη ότι η επίδειξη θα λειτουργεί μόνο σε Chrome, Safari και Opera κατά τη στιγμή αυτής της γραφής.