Τοποθετήστε Σχετική - τι είναι αυτό; λεπτομερή περιγραφή

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

Ωστόσο, πριν να γίνει ένας έμπειρος προγραμματιστής, κάθε νεοφερμένο ξοδεύει πολύ χρόνο μελετώντας τις διάφορες οδηγίες και προδιαγραφές τόσο της γλώσσας HTML, και σε σύμμαχο της - CSS. Σχετικά ακριβώς τι CSS, τι είναι και τι «προσποίηση αυτιά» σας δίνει τη δυνατότητα να σηκωθεί, καθώς και μία από τις κορυφαίες ιδιότητες - Θέση Σχετική - σήμερα θα μιλήσουμε.

Τι είναι το CSS;

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

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

Τέλος, η λέξη «Cascade». Το γεγονός είναι ότι κάθε στοιχείο μπορεί να έχει διάφορες μορφές που μπορεί να αναμιχθεί ή ακόμη και να επικαλύπτονται. Σε τέτοιες περιπτώσεις, το πρόγραμμα περιήγησης θα πρέπει να καταφύγουν σε ένα σύνολο κανόνων, προκειμένου να συνθέσει την εμφάνιση του συγκροτήματος, το οποίο αποδείχθηκε ότι ήταν αρκετά στυλ, με έναν από αυτούς, για παράδειγμα, έχει μια θέση σε σχέση ιδιοκτησίας, και το άλλο - Θέση απόλυτη. Στην πραγματικότητα, αυτές οι συγκρούσεις δεν μπορεί να γίνει ανεκτή, αλλά σε μεγάλα έργα, όπως η σύγχυση συμβαίνει αρκετά συχνά.

Έτσι τώρα, όταν τα πάντα είναι σαφές από το όνομα, ας δούμε ένα απλό παράδειγμα. Ας πούμε ότι το site σας θα πρέπει να είναι ένας μεγάλος αριθμός των κουμπιών, έχουν σχεδιαστεί με έναν ορισμένο τρόπο. Έχουν ιδιότητες, όπως το μέγεθος, τη σκιά, την αδιαφάνεια, χρώμα. Φυσικά, μπορείτε να καθορίσετε αυτές τις παραμέτρους, δημιουργώντας κάθε κουμπί, αλλά είναι πολύ πιο εύκολο στη χρήση CSS. Στην πράξη, θα πρέπει να έχετε την περιγραφή μιας συγκεκριμένης κατηγορίας, το οποίο απαριθμεί τις τιμές όλων των ανωτέρω ιδιοτήτων και, στη συνέχεια, αντί για ένα μακρύ κατάλογο, η ετικέτα του κάθε κουμπιού θα πρέπει μόνο να καθορίσετε το όνομα της κατηγορίας, τότε το ίδιο το πρόγραμμα περιήγησης θα χρωματίσει τα στοιχεία αυτά στο επιθυμητό χρώμα και να τους δώσουμε την κατάλληλη «γυαλάδα».

Τι κάνει η ιδιοκτησία θέσης;

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

Τι τιμές μπορεί η ιδιοκτησία θέσης;

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

• Θέση Inherit. Αυτό το χαρακτηριστικό σας επιτρέπει να αντιγράψετε τα δεδομένα σχετικά με τη θέση του στοιχείου που είναι ένας γονέας. Για παράδειγμα, αν έχετε ένα div με καθορισμένη σχετική θέση, στη συνέχεια άρχισε να με ΑΕΚ αξία κληρονομούν θα οριστεί σε σχετική.
• Τοποθετήστε Στατική. Αυτή η τιμή δίνεται σε όλα τα στοιχεία αυτόματα, εκτός εάν αναφέρεται πια. Τα στοιχεία που ταιριάζουν στη θέση του, όπως αναφέρεται στον κώδικα και δεν είναι διαθέσιμα για μια ποικιλία «διακοσμητικά στοιχεία», που επιτρέπει να αλλάξετε τη θέση τους.
• Θέση απόλυτη. Με την τιμή αυτή η ιδιοκτησία θέσης είναι αρκετά συχνά χρησιμοποιείται σε περιπτώσεις όπου είναι απαραίτητο να δημιουργηθεί ένα «πλωτό» στοιχείο. Με δεδομένη την αξία του στοιχείου ιδιοκτησίας είναι «αόρατα» για τις άλλες συνιστώσες της σελίδας. Δηλαδή, είναι τοποθετημένα σαν να μην υπάρχει απόλυτη στοιχείο μας. Ο ίδιος θα είναι πάντα στη θέση τους, ανεξάρτητα από το πόσο μακριά έχουν μεταβεί σελίδα.
• Θέση Σταθερή. Με πολλούς τρόπους, η τιμή αυτή είναι παρόμοια με την προηγούμενη, όμως, ενώ η απόλυτη στοιχείο είναι συνδεδεμένο με τη μητρική, σταθερό χρήσεις μόνο οι συντεταγμένες της άνω αριστερή γωνία της οθόνης του προγράμματος περιήγησης, αγνοώντας τα υπόλοιπα στοιχεία που προηγήθηκαν.
• Τέλος, θέση σε σχέση. Αυτή τιμές τύπου επιτρέπει στοιχείο τοποθέτησης σε σχέση με το άλλο, τα οποία μπορεί να είναι χρήσιμη για τη δημιουργία μιας προσαρμοστικής σήμανση που ονομάζεται κοινά «καουτσούκ». Με αυτή την ιδιότητα, το στοιχείο θα «ωθήσει» την άλλη, χωρίς να χάσει την ικανότητα να αλλάξουν τη θέση τους στη σελίδα.

Εργασία με Θέση σε διαφορετικά προγράμματα περιήγησης

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

Για παράδειγμα, χρησιμοποιώντας την ήδη «θαμμένο» το πρόγραμμα περιήγησης IE6, δεν μπορείτε να χρησιμοποιήσετε την τιμή Σταθερή και κληρονομούν - «γάιδαρος» απλά το αγνοούν. Ωστόσο, παρά το γεγονός ότι η έβδομη έκδοση του κατάσταση άρχισε να βελτιώνεται, και Σταθερής έχουν ήδη υποστεί επεξεργασία, Κληρονόμηση αγαπημένη «του προγράμματος περιήγησης για να κατεβάσετε άλλα προγράμματα περιήγησης,» έφθασε μόλις στην όγδοη ενσάρκωση της.

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

Εργασία με Θέση σε Javascript

Στην πραγματικότητα, η ιστορία του πώς να εργαστεί με την ιδιότητα Θέση στην Javascript είναι, έχουμε συμπεριλάβει μόνο για λόγους ευπρέπειας. Επειδή αυτή η ιδιοκτησία δεν διαθέτει ειδικούς χαρακτήρες στον τίτλο, μπορείτε να χρησιμοποιήσετε τον JS χωρίς αλλαγές, για παράδειγμα, να ορίσετε τη θέση div Σχετική, θα πρέπει να περιλαμβάνει μια γραμμή σαν αυτή: div.style.position = «σχετική».

Όπως μπορείτε να δείτε, είναι αρκετά απλό.

Γιατί θέση συγκριτικά πλεονεκτήματα ιδιαίτερη προσοχή;

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

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

Πότε θα πρέπει να χρησιμοποιείτε σχετική τοποθέτηση;

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

Αυτά τα «κόλπα» που υλοποιείται μέσω Javascript είναι, ή, εάν στόχος για τη σταδιακή επιβολή, μέσα από τις ιδιότητες του CSS3, το οποίο σας επιτρέπει να ρυθμίσετε την κυκλική μεταβολή της αξίας μιας συγκεκριμένης μεταβλητής.

Επιπλέον, σε ορισμένες περιπτώσεις, είναι δυνατόν να δημιουργήσουν «υβριδικά» τιμές Θέση Σχετική. CSS, αν και δεν είναι ταυτόχρονα σας επιτρέπει να ρυθμίσετε κάτι σαν θέση: απόλυτη σχέση, αλλά χρησιμοποιώντας κάποια κόλπα, είναι ακόμα δυνατό να επιτευχθεί αυτό το αποτέλεσμα. Αυτή η προσέγγιση μπορεί να είναι χρήσιμη σε περιπτώσεις όπου πρέπει να δημιουργήσετε πολύπλοκες κάτι σαν μια επεξήγηση εργαλείου ή αναδυόμενο μενού. Λαμβάνοντας υπόψη τα παραδείγματα, θα δώσουμε μια περιγραφή της δομής ενός τέτοιου «υβριδικό».

Παραδείγματα χρησιμοποιώντας την σχετική κατάταξη

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

Ας αρχίσουμε με το «ξεμείνει» γραμμή. Ας υποθέσουμε ότι έχετε μια ανάγκη για ένα στοιχείο που θα «ταξιδεύουν», επειδή το αριστερό άκρο της οθόνης και σιγά-σιγά να κινούνται προς τη δεξιά πλευρά. Για την εφαρμογή ενός τέτοιου «μηχανισμού» θα πρέπει να οριστεί η θέση: σχετικό? αριστερά: -100px, όπου -100 - ο κατά προσέγγιση αριθμός των εικονοστοιχείων που συνιστούν το πλάτος μπλοκ. Αυτό το στυλ θα σας επιτρέψει να κρύψει τη μονάδα έξω από την οθόνη, τοποθετώντας το στο «θέση εκκίνησης». Τώρα μπορείτε να χρησιμοποιήσετε μια δέσμη ενεργειών που θα αυξήσει κάθε λίγα χιλιοστά του δευτερολέπτου αριστερά αξίας του ακινήτου ανά μονάδα εφ 'όσον δεν γίνει ίσο με το πλάτος του παραθύρου του προγράμματος περιήγησης μείον το πλάτος του στοιχείου. Το αποτέλεσμα είναι μια μονάδα που βγαίνει από την αριστερή πλευρά, έλασης σε όλη την οθόνη και «σταθμεύουν» στο δεξί του χέρι.

Ένα άλλο παράδειγμα σας επιτρέπει να δημιουργήσετε «σχετική-απόλυτη» στοιχεία. Για παράδειγμα, μπορείτε να εισάγετε ένα απόλυτο μέσα σε ένα άλλο, που έχει θέση σε σχέση. Ως αποτέλεσμα, έχουμε μια «σχέση» μπλοκ που δεν έχει το μέγεθος στο οποίο η απόλυτη εγγράφεται, είναι πλέον σε θέση να εκδηλωθεί σε θέση ανεξάρτητα από το προηγούμενο στοιχείο.

Τυπικά λάθη κατά τη χρήση θέση του σε σχέση

Το πιο κοινό λάθος κατά τη χρήση της σχετικής θέσης είναι ότι πολλοί σχεδιαστές ιστοσελίδων ξεχάσουμε τη δυνατότητα να κρατήσουν μια θέση στη μονάδα, η οποία μπορεί να βρίσκονται οπουδήποτε. Για παράδειγμα, αν έχετε ένα αρκετά μεγάλο, τοποθετείται έξω από την οθόνη και να έχει μια σχετική τοποθέτηση, στη θέση του θα είναι ένα ανοιχτό «τρύπα». Ωστόσο, ακόμα και αυτή η ιδιότητα είναι μερικές φορές δημιουργεί ορισμένα μειονεκτήματα μπορεί να χρησιμοποιηθεί για καλό, για παράδειγμα, δημιουργώντας μια ενδιαφέρουσα επίδραση της «αυτο-συναρμολόγηση» του χώρου, όπου όλα τα τμήματα της σταδιακά τοποθετείται στην πρώτη θέση: 0? αριστερά: 0? τ. ε. την αρχική του θέση.