CSS: Διαφορά μεταξύ ιδιοτήτων θέσης

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

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

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

  • Στατική: Η προεπιλεγμένη κατάσταση για κάθε στοιχείο. Δεν υπάρχει καθορισμένη θέση και το στοιχείο θα επιπλεύσει κανονικά στη σελίδα. Δεν χρειάζεται να καθορίσετε την τιμή αυτής της θέσης εάν θέλετε να ακυρώσετε μια προκαθορισμένη θέση. Για παράδειγμα, εάν ο ιστότοπός σας έχει προεπιλεγμένες θέσεις.
  • Σχετική: Σχετικά τοποθετημένα αντικείμενα ενδέχεται να έχουν θέση όταν υπάρχουν διαθέσιμα πρόσθετα χαρακτηριστικά: πάνω, κάτω, αριστερά και δεξιά. Μια πρόσθετη λειτουργία θα μετακινήσει το στοιχείο μακριά από το κανονικό. Όταν χρησιμοποιείτε τη θέση αυτή δεν δημιουργούνται κενά. Στη θέση αυτή, μπορείτε επίσης να χρησιμοποιήσετε την ιδιότητα z-index. Από προεπιλογή (τιμή: αυτόματη), το στοιχείο εμφανίζεται πάνω από οποιοδήποτε άλλο στατικό στοιχείο.

* Σημείωση: Μπορείτε να χρησιμοποιήσετε την ιδιότητα z-index μόνο σε ενσωματωμένα στοιχεία. Αυτή η λειτουργία δεν λειτουργεί με στατικά τοποθετημένα αντικείμενα. Ο Z-ευρετήριο ελέγχει τη σειρά των αντικειμένων σας. Μπορείτε να αλλάξετε την τιμή του z-index για να ελέγξετε την εμφάνιση ενός στοιχείου. Το επάνω z-ευρετήριο τοποθετεί το στοιχείο με τη σειρά του κάτω στρώματος και αντίστροφα.

  • Σταθερό: Το απολύτως τοποθετημένο στοιχείο τοποθετείται σε σχέση με το παράθυρο προβολής / προγράμματος περιήγησης και παραμένει το ίδιο, ακόμη και κατά την κύλιση. Αν χρησιμοποιείτε αυτή τη θέση και είστε τόσο ευέλικτοι όσο η οθόνη σας, η απόλυτη τοποθέτηση λειτουργεί σε εύκαμπτα δοχεία. Ωστόσο, η απόλυτη τοποθέτηση οδηγεί σε συγκρούσεις με τα ανθεκτικά παιδιά (πιασίματα κάμψης).
  • Απόλυτο: Το απόλυτο στοιχείο τοποθετείται σε σχέση με τον πλησιέστερο πρόγονο (στοιχείο γονέα / δοχείου). Εάν ο πρόγονος δεν είναι στοιχείο, το στοιχείο τοποθετείται το ίδιο στο σώμα του εγγράφου. Σε αντίθεση με την απόλυτη και σταθερή θέση, το στοιχείο μετακινείται στη σελίδα καθώς περιστρέφετε. Ορίζοντας την απόλυτη τοποθέτηση, το στοιχείο αποκλείεται από τη ροή άλλων στοιχείων του εγγράφου. Αυτό το απολύτως ενσωματωμένο στοιχείο δεν επηρεάζει άλλα στοιχεία στη σελίδα σας και αντίστροφα.
  • Float: Χρησιμοποιείται για να τυλίξει το κείμενο γύρω από τις φωτογραφίες και να τοποθετηθεί περισσότερο στα αριστερά ή δεξιά της σελίδας.
  • Ακριβώς: Μετακινεί τα πλωτά στοιχεία αριστερά ή δεξιά ή και τα δύο, για να μειώσει το περιεχόμενο και το περιεχόμενο που θα εμφανιστεί μετά το στοιχείο που επιπλέει. Μπορείτε επίσης να μετακινήσετε το επιπλέον στοιχείο σε γραμμή εκκίνησης ή σε γραμμή εισόδου.

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