Τοποθέτηση. Χρήση ιδιοτήτων για σχετική τοποθέτηση. Επισκόπηση των διαθέσιμων μεθόδων εντοπισμού θέσης

Τελευταία ενημέρωση: 28.04.2016

Το CSS παρέχει δυνατότητες τοποθέτησης στοιχείων, που σημαίνει ότι μπορούμε να τοποθετήσουμε ένα στοιχείο μέσα συγκεκριμένο μέροςΣτη σελίδα

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

static : τυπική τοποθέτηση στοιχείων, προεπιλεγμένη τιμή

απόλυτη : το στοιχείο τοποθετείται σε σχέση με τα όρια του στοιχείου κοντέινερ εάν η ιδιότητα θέσης του δεν είναι στατική

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

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

Δεν πρέπει να εφαρμόζεται ταυτόχρονα σε ένα στοιχείο float ακίνητοκαι οποιονδήποτε τύπο τοποθέτησης εκτός από τον στατικό (δηλαδή τον προεπιλεγμένο τύπο).

Απόλυτη τοποθέτηση

Η περιοχή προβολής του προγράμματος περιήγησης έχει επάνω, κάτω, δεξιά και αριστερή άκρη. Κάθε μία από αυτές τις τέσσερις ακμές έχει μια αντίστοιχη ιδιότητα CSS: αριστερά, δεξιά, πάνω και κάτω. Οι τιμές για αυτές τις ιδιότητες καθορίζονται σε pixel, ems ή ποσοστά. Δεν είναι απαραίτητο να ορίσετε τιμές και για τις τέσσερις πλευρές. Κατά κανόνα, ορίζονται μόνο δύο τιμές - εσοχή από επάνω άκρηεπάνω και αριστερό περιθώριο αριστερά.

ΓΕΙΑ ΣΟΥ ΚΟΣΜΕ

Εδώ το απόλυτο τοποθετημένο div θα είναι 100 pixel στα αριστερά του περιγράμματος της θύρας προβολής και 50 pixel από το κάτω μέρος.

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

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

Σχετική τοποθέτηση

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

ιδιότητα z-index

Από προεπιλογή, εάν ταιριάζουν δύο στοιχεία περιγράμματος, το στοιχείο που ορίζεται στο σήμανσης htmlτο τελευταίο. Ωστόσο, η ιδιότητα z-index σας επιτρέπει να αλλάξετε τη σειρά των στοιχείων όταν επικαλύπτονται. Το ακίνητο παίρνει έναν αριθμό ως αξία. Στοιχεία με μεγαλύτερη τιμή δείκτη z θα εμφανίζονται πάνω από στοιχεία με μικρότερη τιμή δείκτη z.

Για παράδειγμα:

Τώρα ας προσθέσουμε έναν νέο κανόνα στο στυλ μπλοκ redBlock:

RedBlock (z-index: 100; θέση: απόλυτη; επάνω: 20 px; αριστερά: 50 px; πλάτος: 80 px; ύψος: 80 px; χρώμα φόντου: κόκκινο; )

Εδώ ο δείκτης z είναι 100. Αλλά δεν χρειάζεται να είναι ο αριθμός 100. Επειδή το δεύτερο μπλοκ δεν έχει καθορισμένο δείκτη z και στην πραγματικότητα ίσο με μηδέν, τότε για το redBlock μπορούμε να ορίσουμε την ιδιότητα z-index σε οποιαδήποτε τιμή μεγαλύτερη από το μηδέν.

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

Η τοποθέτηση είναι ένα από τα βασικές έννοιες V διάταξη μπλοκ. Μόλις το καταλάβετε, πολλά θα σας γίνουν ξεκάθαρα και η διάταξη θα μετατραπεί από τον σαμανισμό σε μια ουσιαστική διαδικασία. Έτσι, αυτό το άρθρο θα επικεντρωθεί στις ιδιότητες CSS. θέσηΚαι φλοτέρ.

1. θέση: στατική

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

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

#content( θέση: στατική; )

2.θέση:συγγενής

Η σχετική τοποθέτηση (θέση: σχετική) σάς επιτρέπει να χρησιμοποιήσετε τις ιδιότητες πάνω, κάτω, αριστερά και δεξιά για να τοποθετήσετε ένα στοιχείο σε σχέση με το σημείο που θα εμφανιζόταν στην κανονική τοποθέτηση.

Ας μετακινήσουμε το #content 20 pixel προς τα κάτω και 40 pixel προς τα αριστερά:

#content( θέση: σχετική; επάνω: 20 εικονοστοιχεία; αριστερά: -40 εικονοστοιχεία; )

Παρατηρήστε ότι υπάρχει πλέον κενός χώρος όπου θα ήταν το μπλοκ #content. Μετά το μπλοκ #content, το μπλοκ #footer δεν μετακινήθηκε χαμηλότερα επειδή το #content εξακολουθεί να καταλαμβάνει τη θέση του στο έγγραφο, παρόλο που το μετακινήσαμε.

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

3. θέση: απόλυτη

Με την απόλυτη τοποθέτηση (θέση: απόλυτη), το στοιχείο αφαιρείται από το έγγραφο και εμφανίζεται εκεί που το ζητάτε.

Ας μετακινήσουμε, για παράδειγμα, το μπλοκ #div-1a στην επάνω δεξιά γωνία της σελίδας:

#div-1a (θέση:απόλυτη; επάνω:0; δεξιά:0; πλάτος:200px; )

Σημειώστε ότι αυτή τη φορά, επειδή το μπλοκ #div-1a αφαιρέθηκε από το έγγραφο, τα υπόλοιπα στοιχεία στη σελίδα τοποθετήθηκαν διαφορετικά: #div-1b, #div-1c και #footer μετακινήθηκαν παραπάνω, στη θέση του αφαιρεθέντος μπλοκ . Και το ίδιο το μπλοκ #div-1a βρίσκεται ακριβώς στην επάνω δεξιά γωνία της σελίδας.

Με αυτόν τον τρόπο μπορούμε να τοποθετήσουμε οποιοδήποτε στοιχείο σε σχέση με τη σελίδα, αλλά αυτό δεν είναι αρκετό. Στην πραγματικότητα, πρέπει να τοποθετήσουμε το #div-1a σε σχέση με γονικό μπλοκ#περιεχόμενο. Και σε αυτό το σημείο, η σχετική τοποθέτηση μπαίνει ξανά στο παιχνίδι.

4. θέση: σταθερή

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

#div-1a ( position:fixed; top:0; right:0; πλάτος:200px; )

Σε IE με θέση: σταθερό, δεν είναι όλα τόσο ομαλά όσο θα θέλαμε, αλλά υπάρχει πολλοί τρόποιπαρακάμψουν αυτούς τους περιορισμούς.

5. θέση:σχετικός + θέση:απόλυτος

Εκχωρώντας μια σχετική θέση στο μπλοκ #content (θέση: σχετική), μπορούμε να τοποθετήσουμε οποιαδήποτε θυγατρικά στοιχεία σε σχέση με τα όριά του. Ας τοποθετήσουμε ένα μπλοκ #div-1a στην επάνω δεξιά γωνία του μπλοκ #content.

#content ( position:relative; ) #div-1a ( position:absolute; top:0; right:0; πλάτος:200px; )

6. Δύο στήλες

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

#content ( position:relative; ) #div-1a ( position:absolute; top:0; right:0; width:200px; ) #div-1b ( position:absolute; top:0; left:0; πλάτος:200px )

Ένα από τα πλεονεκτήματα της απόλυτης τοποθέτησης είναι η δυνατότητα τοποθέτησης στοιχείων με οποιαδήποτε σειρά, ανεξάρτητα από το πώς βρίσκονται στη σήμανση. Στο παραπάνω παράδειγμα, το μπλοκ #div-1b τοποθετείται πριν από το μπλοκ #div-1a.

Και τώρα θα πρέπει να έχετε μια ερώτηση: "Πού πήγαν τα υπόλοιπα στοιχεία από το παράδειγμά μας;" Κρύφτηκαν κάτω από τέλεια τοποθετημένα μπλοκ. Ευτυχώς, υπάρχει τρόπος να διορθωθεί αυτό.

7. Δύο κίονες με σταθερό ύψος

Μια λύση είναι να δοθεί ένα σταθερό ύψος στο δοχείο που περιέχει τις στήλες.

#content ( position:relative; ύψος: 450px; ) #div-1a ( position:absolute; top:0; right:0; πλάτος:200px; ) #div-1b ( position:absolute; top:0; left:0 ;width:200px;

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

8. Πλωτήρας

Για ηχεία με μεταβλητό ύψος, απόλυτη τοποθέτησηδεν λειτουργεί, οπότε ας δούμε μια άλλη επιλογή.

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

#div-1a ( float:αριστερά; πλάτος:200px; )

9. «Πλοούμενα» ηχεία

Αν αντιστοιχίσουμε float: αριστερά στο πρώτο μπλοκ και μετά float: αριστερά στο δεύτερο, κάθε μπλοκ θα ωθηθεί στην αριστερή άκρη και θα πάρουμε δύο στήλες, με μεταβλητό ύψος.

#div-1a ( float:αριστερά; πλάτος:150px; ) #div-1b (float:αριστερά; πλάτος:150px; )

Μπορείτε επίσης να αντιστοιχίσετε την αντίθετη τιμή float στις στήλες, οπότε θα κατανεμηθούν κατά μήκος των άκρων του κοντέινερ.

#div-1a ( float:δεξιά; πλάτος:150px; ) #div-1b (float:αριστερά; πλάτος:150px; )

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

10. Πλωτήρας καθαρισμού

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

#div-1a ( float:αριστερά; πλάτος:190px; ) #div-1b ( float:αριστερά; πλάτος:190px; ) #div-1c (διαφανές:και τα δύο; )

Ή αντιστοιχίστε το στο γονικό κοντέινερ ιδιότητα υπερχείλισης: κρυμμένος

#content ( υπερχείλιση:κρυφό; )

Σε κάθε περίπτωση το αποτέλεσμα θα είναι το ίδιο.

συμπέρασμα

Σήμερα, εξετάστηκαν μόνο οι βασικές τεχνικές τοποθέτησης και οι περισσότερες απλά παραδείγματα. Επίσης, για να βοηθήσω τους αρχάριους σχεδιαστές layout, προτείνω πάντα μια σειρά άρθρων του Ivan Sagalayev, τα οποία κάποτε με βοήθησαν πολύ.

Από τον συγγραφέα:Χαιρετίσματα. Τοποθέτηση στοιχεία cssείναι ένα πολύ σημαντικό θέμα στην κατασκευή ιστοσελίδων. Σε αυτό το άρθρο, προτείνω να το δούμε με περισσότερες λεπτομέρειες, όλους τους τρόπους μετακίνησης μπλοκ σε μια ιστοσελίδα.

Ποιοι είναι οι τύποι

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

Απόλυτη τοποθέτηση

Αυτό είναι το πρώτο από γνωστά είδη. Ορίζεται ως εξής: θέση: απόλυτη. Μετά από αυτό, το μπλοκ χάνει τις συνηθισμένες του ιδιότητες και πέφτει εντελώς από την κανονική ροή. Τι είναι αυτό το ρεύμα; Δοκιμάστε να τοποθετήσετε πολλά στοιχεία μπλοκ στη σειρά στη σήμανση. Πώς θα γίνουν; Το ένα μετά το άλλο, και τίποτα άλλο.

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

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

Μπλοκ (θέση: απόλυτη; κάτω: 0; δεξιά: 0; )

ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ ( θέση: απόλυτη; κάτω: 0; δεξιά : 0 ;

Το στοιχείο θα μετακινηθεί στην κάτω δεξιά γωνία. Παρατηρώ ότι συχνά κάνουν το επάνω κουμπί με αυτόν τον τρόπο - το τοποθετούν ακριβώς στην ίδια γωνία. Ακολουθεί ένα άλλο παράδειγμα στο οποίο θα δείξω πρώτα πιθανή σήμανση:

< div id = "wrapper" > < div class = "block" > < / div > < / div >

Και τώρα τα στυλ css για αυτό το κομμάτι:

#wrapper( θέση: σχετική; ) .block(θέση: απόλυτη; επάνω: 0; δεξιά: 10 εικονοστοιχεία; )

#περικάλυμμα( θέση: σχετική; ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ ( θέση: απόλυτη; κορυφή: 0; δεξιά : 10 px ;

Σε αυτό το παράδειγμα, πρώτα εκχωρήσαμε σχετική τοποθέτηση στο γονικό κοντέινερ (σχετικό - περισσότερα για αυτό αργότερα στο άρθρο) και, στη συνέχεια, ορίσαμε απόλυτη τοποθέτηση για το ίδιο στοιχείο.block. Ως αποτέλεσμα, οι συντεταγμένες θα μετρηθούν όχι από το ίδιο το παράθυρο του προγράμματος περιήγησης, αλλά από τις άκρες του γονικού στοιχείου, δηλαδή το μπλοκ περιτυλίγματος.

Σχετική τοποθέτηση στοιχείων css

Αυτός είναι ο επόμενος τύπος και γράφεται ως εξής – θέση: σχετική. Οι συντεταγμένες καθορίζονται από τις ίδιες ιδιότητες όπως για την απόλυτη θέση. Η μόνη σημαντική διαφορά είναι ότι το στοιχείο δεν πέφτει τυπικά από τη ροή - υπάρχει χώρος για αυτό.

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

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

Μπλοκ (θέση: σχετική; επάνω: 10 εικονοστοιχεία; δεξιά: 50 εικονοστοιχεία; )

ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ ( θέση: σχετική; κορυφή: 10 px; δεξιά : 50 px ;

Το μπλοκ θα μετακινηθεί 50 pixel προς τα δεξιά και 10 προς τα αριστερά.

Στερέωση

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

Θέση: στατική ή κανονική στατική θέση

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

Πώς να τοποθετήσετε σωστά τα μπλοκ στο css;

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

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

Άλλες τεχνικές: κεντράρισμα, αιωρούμενα μπλοκ

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

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

Το κεντράρισμα γίνεται ως εξής: το μπλοκ πρέπει να γράψει ένα συγκεκριμένο πλάτος και, στη συνέχεια, να ορίσει το περιθώριο: 0 αυτόματη ιδιότητα. Είναι η αυτόματη τιμή που θα την ευθυγραμμίσει οριζόντια ακριβώς στο κέντρο. Φυσικά, για αυτό πρέπει να είναι το μόνο στη σειρά του, διαφορετικά τίποτα δεν θα λειτουργήσει.

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

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

Ένα στοιχείο μπλοκ στην HTML είναι ένα στοιχείο που, από προεπιλογή, καταλαμβάνει ολόκληρο το πλάτος του γονικού του στοιχείου. Το γονικό στοιχείο μπορεί να είναι ένα άλλο στοιχείο μπλοκ ή ένα παράθυρο προγράμματος περιήγησης. Μπορείτε να ορίσετε το πλάτος και το ύψος ενός στοιχείου μπλοκ χρησιμοποιώντας ιδιότητες CSS. Η τοποθέτηση στοιχείων μπλοκ είναι η διαδικασία τοποθέτησης τους μέσα στο παράθυρο του προγράμματος περιήγησης και σε σχέση με αυτά. χρησιμοποιώντας CSSθέση ιδιοτήτων , αριστερά , πάνω , δεξιά και κάτω . Ιδιοκτησία Θέση CSSπροορίζεται να καθορίσει ένα από τα τέσσερα διαθέσιμους τύπουςτοποθέτηση: στατική (προεπιλογή), απόλυτη, σταθερή και σχετική. Υπόλοιπο Ιδιότητες CSS, δηλαδή αριστερά , επάνω , δεξιά και κάτω προορίζονται για τον καθορισμό αποστάσεων σε σχέση με το αριστερό, το επάνω, το δεξί και το κάτω άκρο του γονικού στοιχείου. Επίσης, τα στοιχεία μπλοκ μπορούν να επικαλύπτονται μεταξύ τους κατά τον ορισμό συγκεκριμένων ιδιοτήτων και αυτή η ευκαιρίατο ίδιο μπορεί να χρησιμοποιηθεί σε ιστότοπους.

Προεπιλεγμένη τοποθέτηση (στατική)

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

Απόλυτη τοποθέτηση (απόλυτη)

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

Σταθερή τοποθέτηση

Η σταθερή τοποθέτηση διαφέρει από άλλους τύπους τοποθέτησης και δεν μετακινείται με το περιεχόμενο καθώς κάνετε κύλιση στη σελίδα. Στοιχεία μπλοκμε σταθερή τοποθέτηση αγκυρώνονται χρησιμοποιώντας τις ιδιότητες αριστερά , επάνω , δεξιά και κάτω στις άκρες του παραθύρου του προγράμματος περιήγησης. Η σταθερή τοποθέτηση χρησιμοποιείται για τη δημιουργία διεπαφών πλαισίων (το παράθυρο του προγράμματος περιήγησης χωρίζεται σε διάφορες περιοχές), σταθερά μενού, σταθερό υπόγειοιστότοπος και «μόνιμα» μπλοκ (λίστα συνδέσμων, κουμπιά κοινωνικής δικτύωσηςκαι τα λοιπά.).

Σχετική τοποθέτηση

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

Ωστόσο, αυτή η θέση μπλοκ μπορεί επίσης να δημιουργηθεί χρησιμοποιώντας ιδιότητες περιθωρίου(εσοχές).

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

Ας εξετάσουμε τις επιλογές:

Τοποθέτηση μπλοκ cssένας από τα πιο σημαντικά στάδιαδιάταξη, γιατί αυτό είναι που επηρεάζει την προσαρμοστικότητα του ιστότοπου ή τη δυνατότητα υλοποίησής του στο μέλλον (αν αυτή τη στιγμήδεν απαιτείται), και έχει επίσης σημαντικό αντίκτυπο στην περαιτέρω κλιμάκωση του ιστότοπου. Δεν είναι ασυνήθιστο για «επίδοξους σχεδιαστές διάταξης» να κάνουν μια τέτοια διάταξη που στο τέλος είναι πιο εύκολο να την πετάξεις παρά να αλλάξεις κάτι, αλλά ταυτόχρονα να φαίνεται απόλυτα σύμφωνα με τη διάταξη. Αυτή η κατάστασηπροκύπτει από την έλλειψη κατανόησης του πού και πότε να χρησιμοποιηθεί αυτός ή εκείνος ο τύπος τοποθέτησης. Σήμερα θα προσπαθήσουμε να καταλάβουμε Αυτό το θέμα. Και έτσι, στο css υπάρχει μια ιδιότητα θέση.Αυτή η ιδιότητα μπορεί να λάβει 5 τιμές, αλλά θα εξετάσουμε 4 κύριες:

• απόλυτος
• στατικός
• συγγενής
• σταθερός

Απόλυτη τοποθέτηση μπλοκ (απόλυτη)

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

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

Για ευκολία, τα μπλοκ τονίστηκαν με ένα πολύχρωμο πλαίσιο. Η σήμανση θα μοιάζει με αυτό:

XHTML

Σχέση (θέση: σχετική; ) .κίτρινο (θέση: απόλυτη; δεξιά: 10 εικονοστοιχεία; κάτω: 10 εικονοστοιχεία; )

Σχέση θέση: σχετική; Κίτρινος θέση: απόλυτη; δεξιά : 10 px ; κάτω : 10 px ;

ΣΕ σε αυτό το παράδειγμαχρησιμοποιήσαμε τις ιδιότητες δεξιά και κάτω για να ορίσουμε τη μετατόπιση από τη δεξιά και την κάτω ακμή. Αυτές οι τιμές ιδιοτήτων είναι ισοδύναμες με τις τιμές πάνω: Ύψος στοιχείου - 10 εικονοστοιχεία και αριστερά: Πλάτος στοιχείου - 10 εικονοστοιχεία.

Επίσης, η απόλυτη τοποθέτηση χρησιμοποιείται μερικές φορές όταν είναι απαραίτητο να «επιδράσει» ένα στοιχείο σε ένα άλλο.

Στατική τοποθέτηση (στατική)

Ο πιο συνηθισμένος τύπος τοποθέτησης που εμφανίζεται σε κάθε σελίδα και συνήθως ορίζεται για τα περισσότερα στοιχεία είναι στατικός, γραμμένος σε css ως στατικό. Για τους περισσότερους Ετικέτες HTML δεδομένη αξίαορίζεται από προεπιλογή δηλ. Εάν η θέση δεν καθορίζεται ρητά, η τιμή θα είναι στατική. Με αυτή τη διάταξη, τα στοιχεία παρατάσσονται το ένα κάτω από το άλλο και οι συντεταγμένες στο παράθυρο κάθε στοιχείου εξαρτώνται από τα πλησιέστερα στοιχεία με θέση: στατική ή θέση: σχετική. Οι ιδιότητες πάνω, αριστερά, δεξιά, κάτω δεν θα λειτουργήσουν με αυτήν την τοποθέτηση η θέση αλλάζει λόγω της ιδιότητας περιθωρίου.

Σχετική τοποθέτηση

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

Σταθερή τοποθέτηση

Η σταθερή θέση είναι παρόμοια με την απόλυτη τοποθέτηση ως προς τον τρόπο με τον οποίο καθορίζει τις συντεταγμένες, αλλά η τοποθεσία δεν υπολογίζεται σχετικά σελίδες HTML, αλλά σε σχέση με το παράθυρο του προγράμματος περιήγησης, π.χ. με την ιδιότητα top: 10px, θα ορίσετε το επάνω περιθώριο σε 10px ΑΠΟ ΤΟ ΠΑΡΑΘΥΡΟ ΤΟΥ BROWSERκαι ανεξάρτητα από το επίπεδο κύλισης σελίδας που βρίσκεστε, αυτό το στοιχείο θα ακολουθεί πάντα την οθόνη σας.

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