Τοποθέτηση CSS

Η ιδιότητα Τοποθέτησης (Positioning) της CSS επιτρέπει τη τοποθέτηση των στοιχείων.

CSS Τοποθέτηση και Ροή

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

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

Συγκεκριμένα, η CSS1 εισήγαγε για πρώτη φορά τη ροή, βασισμένη σε μια λειτουργία που προσθέτει το Netscape στις αρχές της ανάπτυξης του Web. Η ροή δεν είναι αποκλειστικά τοποθέτηση, αλλά φυσικά δεν είναι και κανονική διατάξη ροής. Θα εξηγήσουμε την έννοια της ροής σε μελλοντικές ενότητες.

Όλα είναι κουτί

Οι στοιχεία div, h1 ή p συχνά ονομάζονται στοιχεία блκοκοινού. Αυτό σημαίνει ότι αυτά τα στοιχεία εμφανίζονται ωςΠεριεχόμενο ενός κουτιούδηλαδή το “κουτί του bloκου”. Αντίθετα, τα στοιχεία span και strong κληρονομούνται ως “εσωτερικά στοιχεία”, καθώς το περιεχόμενό τους εμφανίζεται στη γραμμή, δηλαδή στο “κουτί γραμμής”.

Μπορείτε να χρησιμοποιήσετε Ιδιότητα displayΑλλαγή του τύπου του δημιουργημένου κουτιού. Αυτό σημαίνει ότι με τη ρύθμιση της ιδιότητας display σε block, μπορούμε να κάνουμε τα εσωτερικά στοιχεία (π.χ. στοιχείο <a>) να συμπεριφέρονται όπως οι блκοκοινοί στοιχεία. Επίσης, με τη ρύθμιση του display σε none, ορίζεται ότι το στοιχείο δεν δημιουργεί κουτί και το κουτί και το περιεχόμενό του δεν εμφανίζονται, δεν καταλαμβάνουν χώρο στο έγγραφο.

Ωστόσο, σε μια περίπτωση, ακόμα και χωρίς εκφαντική ορισμό, δημιουργείται ένας блκοκοινός στοιχείο. Αυτό συμβαίνει όταν προσθέτουμε κείμενο στο κεφάλαιο ενός блκοκοινού στοιχείου (π.χ. div). Ακόμα και αν δεν οριστεί ως παράγραφο, θα θεωρηθεί ως παράγραφο:

<div>
κείμενο
<p>Περισσότερος κείμενο.</p>
</div>

Σε αυτή την περίπτωση, το κουτί ονομάζεται ανώνυμο κουτί, καθώς δεν συνδέεται με κάποιο ειδικά ορισμένο στοιχείο.

Η γραμμή του κειμένου του блκοκοινού στοιχείου θα αντιμετωπίσει κάτι παρόμοιο. Ας υποθέσουμε ότι υπάρχει ένα παράδειγμα περιεχομένου με τρία γραμμές κειμένου. Κάθε γραμμή κειμένου δημιουργεί ένα ανώνυμο κουτί. Δεν μπορεί να εφαρμοστεί στυλ σε ανώνυμα κουτί ή κουτί γραμμής, καθώς δεν υπάρχει τοποθεσία για την εφαρμογή του στυλ (σημείωση: το κουτί γραμμής και το κουτί γραμμής είναι δύο διαφορετικά concept). Αυτό βοηθά να κατανοήσουμε ότι όλα όσα βλέπουμε στην οθόνη δημιουργούν κάποιο κουτί.

Μηχανισμοί τοποθέτησης CSS

Το CSS έχει τρία βασικά μηχανισμούς τοποθέτησης: το κανονικό ρεύμα, η κίνηση και η αβόλεια τοποθέτηση.

Εκτός αν καθοριστεί ειδικά, όλα τα κουτί τοποθετούνται στο κανονικό ρεύμα. Δηλαδή, η τοποθεσία των στοιχείων στο κανονικό ρεύμα καθορίζεται από τη θέση τους στο (X)HTML.

Οι κουτί των блκοκοινού στοιχείων τοποθετούνται από πάνω προς τα κάτω και η κάθετη απόσταση μεταξύ των κουτιών υπολογίζεται από την κάθετη εξωτερική απόσταση των κουτιών.

Τα κουτί γραμμής τοποθετούνται οριζόντια σε μια γραμμή. Μπορούν να προσαρμοστούν οι χώροι τους με οριζόντιους εσωτερικούς χώρους, πλαίσια και περιθώρια. Ωστόσο, οι κάθετοι εσωτερικοί χώροι, πλαίσια και περιθώρια δεν επηρεάζουν την ύψος του κουτιού γραμμής. Το οριζόντιο κουτί που δημιουργείται από μια γραμμή ονομάζεταιΚουτί γραμμής (Line Box)Η ύψος του κουτιού γραμμής είναι πάντα αρκετή για να περιέχει όλα τα περιεχόμενα κουτιών γραμμής που περιέχει. Ωστόσο, η ύψος του κουτιού μπορεί να αυξηθεί με τη ρύθμιση της ύψους γραμμής.

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

Ατрибούς Position CSS

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

Η σημασία της τιμής του positioning:

static
Ο κουτί στοιχείων δημιουργείται κανονικά. Οι блκοκοινοί στοιχεία δημιουργούν ένα ορθογώνιο κουτί, ως μέρος του ροής του έγγραφου, ενώ οι εσωτερικοί στοιχεία δημιουργούν ένα ή περισσότερα κουτί γραμμών, τοποθετημένα στο γονικό τους στοιχείο.
relative
Το κουτί στοιχείου απομακρύνεται από μια απόσταση. Το στοιχείο διατηρεί τη μορφή του πριν από τη τοποθέτηση, και το χώρο που κατείχε παραμένει.
absolute
Το κουτί στοιχείου αφαιρείται πλήρως από το ρεύμα του έγγραφου και τοποθετείται σε σχέση με το περιεχόμενο του. Το περιεχόμενο μπορεί να είναι ένας άλλος στοιχείο στο έγγραφο ή η αρχική περιεχόμενη περιοχή. Το χώρο που κατείχε το στοιχείο στο κανονικό ρεύμα θα κλείσει, όπως αν το στοιχείο δεν υπήρχε. Η τοποθέτηση δημιουργεί έναν block-level κουτί, ανεξάρτητα από το τύπο του κουτιού που δημιουργείται στο κανονικό ρεύμα.
fixed
Η απόδοση του κουτιού στοιχείου μοιάζει με τη ρύθμιση position σε absolute, αλλά το περιεχόμενο του είναι το παράθυρο του περιηγητή.

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

Παράδειγμα

Τοποθέτηση: Αναλυτική τοποθέτηση
Αυτό το παράδειγμα δείχνει πώς να τοποθετήσετε το στοιχείο σε σχέση με την κανονική τοποθεσία του στοιχείου.
Τοποθέτηση: Αποτελεσματική τοποθέτηση
Αυτό το παράδειγμα δείχνει πώς να τοποθετήσετε το στοιχείο με αbsolute τιμή.
Τοποθέτηση: Αποτελεσματική τοποθέτηση
Αυτό το παράδειγμα δείχνει πώς να τοποθετήσετε το στοιχείο σε σχέση με το παράθυρο του περιηγητή.
Ρύθμιση του επάνω άκρου της εικόνας με σταθερή τιμή
Αυτό το παράδειγμα δείχνει πώς να ρυθμίσετε το επάνω άκρο της εικόνας με σταθερή τιμή.
Ρύθμιση του επάνω άκρου της εικόνας με ποσοστό
Αυτό το παράδειγμα δείχνει πώς να ρυθμίσετε το επάνω άκρο της εικόνας με ποσοστό.
Ρύθμιση του κάτω άκρου της εικόνας με τιμή σε pixel
Αυτό το παράδειγμα δείχνει πώς να ρυθμίσετε το κάτω άκρο της εικόνας με τιμή σε pixel.
Ρύθμιση του κάτω άκρου της εικόνας με ποσοστό
Αυτό το παράδειγμα δείχνει πώς να ρυθμίσετε το κάτω άκρο της εικόνας με ποσοστό.
Ρύθμιση του αριστερού άκρου της εικόνας με σταθερή τιμή
Αυτό το παράδειγμα δείχνει πώς να ρυθμίσετε το αριστερό άκρο της εικόνας με σταθερή τιμή.
Ρύθμιση του αριστερού άκρου της εικόνας με ποσοστό
Αυτό το παράδειγμα δείχνει πώς να ρυθμίσετε το αριστερό άκρο της εικόνας με ποσοστό.
Ρύθμιση του δεξιού άκρου της εικόνας με σταθερή τιμή
Αυτό το παράδειγμα δείχνει πώς να ρυθμίσετε το δεξί άκρο της εικόνας με σταθερή τιμή.
Ρύθμιση του δεξιού άκρου της εικόνας με ποσοστό
Αυτό το παράδειγμα δείχνει πώς να ρυθμίσετε το δεξί άκρο της εικόνας με ποσοστό.
Πώς να χρησιμοποιήσετε τη γραμμή κύλισης για να εμφανίσετε το περιεχόμενο που υπερβαίνει τον στοιχείο
Αυτό το παράδειγμα δείχνει πώς να ρυθμίσετε την ιδιότητα overflow για να καθορίσετε την αντίστοιχη ενέργεια όταν το περιεχόμενο του στοιχείου είναι πολύ μεγάλο και ξεπερνά την καθορισμένη περιοχή.
Πώς να κρύψετε το περιεχόμενο που υπερβαίνει τον στοιχείο
Αυτό το παράδειγμα δείχνει πώς να ρυθμίσετε την ιδιότητα overflow για να κρύψετε το περιεχόμενο όταν το περιεχόμενο του στοιχείου είναι πολύ μεγάλο για να ταιριάζει στην καθορισμένη περιοχή.
Πώς να ρυθμίσετε τον περιηγητή να χειρίζεται αυτόματα την υπερβολή
Αυτό το παράδειγμα δείχνει πώς να ρυθμίσετε τον περιηγητή να χειρίζεται αυτόματα την υπερβολή.
Ρύθμιση της μορφής του στοιχείου
Αυτό το παράδειγμα δείχνει πώς να ρυθμίσετε τη μορφή του στοιχείου. Το στοιχείο αυτό κόβεται σε αυτή τη μορφή και εμφανίζεται.
Οριζόντια τοποθέτηση εικόνων
Αυτό το παράδειγμα δείχνει πώς να τοποθετήσετε εικόνες οριζόντια στο κείμενο.
Z-index
Z-index χρησιμοποιείται για να τοποθετήσει ένα στοιχείο μετά από ένα άλλο στοιχείο.
Z-index
Το στοιχείο στην παραπάνω παράδειγμα έχει αλλάξει το z-index.

Ατρβούς pozitioning CSS

Οι ατρβούς pozitioning CSS επιτρέπουν τη pozitioning των στοιχείων.

Ατрибούς Περιγραφή
position Τοποθέτηση του στοιχείου σε μια στατική, σχετική, α绝对的, ή στατική pozitioning.
top Ορίζει τη μετατόπιση από τα πάνω του εξωτερικού τομώματος του στοιχείου pozitioning μέχρι τα πάνω του τομέα περιλαμβανομένου.
right Ορίζει τη μετατόπιση από τα δεξιά του εξωτερικού τομώματος του στοιχείου pozitioning μέχρι τα δεξιά του τομέα περιλαμβανομένου.
bottom Ορίζει τη μετατόπιση από τα κάτω του εξωτερικού τομώματος του στοιχείου pozitioning μέχρι τα κάτω του τομέα περιλαμβανομένου.
left Ορίζει τη μετατόπιση από τα αριστερά του εξωτερικού τομώματος του στοιχείου pozitioning μέχρι τα αριστερά του τομέα περιλαμβανομένου.
overflow Ρύθμιση του τι συμβαίνει όταν το περιεχόμενο του στοιχείου υπερβαίνει τα όρια της περιοχής του.
clip Ρύθμιση της μορφής του στοιχείου. Το στοιχείο κόβεται μέσα σε αυτή τη μορφή και τότε εμφανίζεται.
vertical-align Ρύθμιση του τρόπου αντιμετώπισης του περιεχομένου του στοιχείου όταν υπερβαίνει τα όρια του τομέα του.
z-index Ρύθμιση της σειράς τακτοποίησης των στοιχείων.