CSS z-index: μια επισκόπηση, ακίνητα

Το άρθρο z-index CSS - η θέση των στοιχείων της σελίδας συντονίζει Z: το επίπεδο του στοιχείου της οθόνης ή στρώμα στο οποίο βρίσκεται. Tag που έχει μεγαλύτερη z-index θα εμφανιστεί στο ακέραιο. Οι ετικέτες εμφανίζονται με τη σειρά που εμφανίζονται στην εισερχόμενη ροή και επικάλυψης. приоритет видимости. τιμή Ζ-δείκτη καθορίζει την προτεραιότητα ορατότητα.

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

Ο γενικός κανόνας: η τάξη και το επίπεδο της

Το ρεύμα εισόδου (σελίδα σχηματίζεται server) διαδοχικά διαβάζει το πρόγραμμα περιήγησης. Όλες οι ετικέτες εμφανίζονται, σύμφωνα με τους κανόνες CSS και μπορεί να επικαλύπτονται.

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

κανόνα ορατότητα

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

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

Επίδραση στη συστοιχία στοιχείου

Αρκεί να την τρίτη ετικέτα scCSS3 αυξήσει το z-index, και σε scCSS4 - να το μειώσει, η συνολική εικόνα αλλάζει. Η αλληλουχία των στοιχείων στο ρεύμα παραμένει η ίδια:

• id= 'scCSS1'; div id = 'scCSS1'?
• id= 'scCSS2'; div id = 'scCSS2'?
• id= 'scCSS3'; div id = 'scCSS3'?
• id= 'scCSS4'. div id = 'scCSS4'.

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

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

Ο συνδυασμός των z-index με χρώμα φόντου

Θα πρέπει να σημειωθεί ότι οι ιδιότητες των CSS φόντο & z-index συμπληρώνουν η μία την άλλη. Όλα τα στοιχεία επιπέδου μπλοκ, και οποιαδήποτε άλλη, καταλαμβάνουν πάντα μια ορθογώνια περιοχή που σχηματίζεται από το μέγιστο ύψος και το μέγιστο πλάτος του περιεχομένου.

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

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

Χρήση CSS ιδιότητες z-index στο στοιχείο του οποίου background-color τιμή είναι διαφανές (ένα είδος διαφάνειας), μπορεί να μιμηθεί οποιοδήποτε στοιχείο του κυκλώματος. Παρά το γεγονός ότι σε κάθε περίπτωση το στοιχείο πραγματικότητα είναι ορθογώνια.

Εκδηλώσεις και ορατά στοιχεία

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

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

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

Ένα απλό παράδειγμα: ένας επισκέπτης έχει μετακινηθεί το δείκτη του ποντικιού στο στοιχείο μενού, αλλά δεν έχουν ακόμη αποφασίσει να κάνει κάτι. Ο κύριος του έργου θα μπορούσε να προσφέρει μια εκδήλωση για να παρακολουθείτε την κίνηση του διαλόγου στο επιθυμητό σημείο (κάντε κλικ - αποφασίζει ένας επισκέπτης) και θα εμφανίσει ένα επαρκές περιεχόμενο. Κανόνας CSS z-index είναι το πιο κατάλληλο για την περίσταση.

φορμά εικόνας

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

Σε γενικές γραμμές, μπορείτε να χρησιμοποιήσετε όλη την ποικιλία των υφιστάμενων μορφών, αλλά από την άποψη της πρακτικότητα και η αποτελεσματικότητα είναι αρκετά λογικό να περιοριστεί * .png για στατικές εικόνες και * .gif - για κινούμενες εικόνες. Δημοφιλή * .jpg είναι επίσης καλή, αλλά δεν επιτρέπει την ευελιξία για να χειραγωγήσουν το χώρο της οθόνης.

σφάλματα Browser και ο κύριος του έργου

Δεν συμβαίνει συχνά, όταν το z-index CSS δεν λειτουργεί, αλλά συμβαίνει. Όροι επικαλυπτόμενα φύλλα στυλ λειτουργεί πάντα, και ο όγκος του αρχείου στυλ συχνά φτάνουν σημαντικές ποσότητες. Όταν κάτι δεν εμφανίζεται, ή απλά δεν έχουν αυτό που πρέπει να είναι, θα πρέπει πρώτα να ελέγξετε τον δικό σας κώδικα, στη συνέχεια, καταργήστε cache του browser σας και δοκιμάστε ξανά τη δική σας κωδικό.

Ερμηνεία HTML και CSS, το πρόγραμμα περιήγησης είναι σχεδόν δεν κάνει λάθη - είναι ένα αξίωμα. Εάν το επιθυμητ αντικείμενο δεν, τότε, στο σχεδιασμό του CSS {θέση: απόλυτη? z-index: 112233? αριστερά: 10px? top: 20px? } ... κάτι λείπει ή δεν καταγράφονται.

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

Style πρέπει να είναι στην τάξη ή το αναγνωριστικό στυλ. Υπογραμμίζοντας στυλ στο στοιχείο πρέπει μόνο σε εξαιρετικές περιπτώσεις.

Χρησιμοποιώντας jQuery.css (z-index, 123) μπορεί επίσης να οδηγήσει σε ένα λάθος, αν όχι εφαρμοστεί στην τάξη ή το αναγνωριστικό. Επιπλέον, jQuery - ένα πραγματικά αξιόλογο εργαλείο ανάπτυξης. Ωστόσο, πριν να το εφαρμόσετε, δεν βλάπτει να σκεφτούμε: είναι δυνατόν να απαλλαγεί από αυτοσχέδια μέσα HTML / CSS, z-index - δεν είναι ένας κανόνας που δεν απαιτεί την άμεση προσοχή.

Σωστή κίνηση των λογικών στρωμάτων, και

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

Με την ευκαιρία, το φαινόμενο της σελίδας προορισμού (σελίδα προορισμού) με τη μορφή δικαιώματος προαίρεσης «εργοτάξιο» - η καλύτερη απόδειξη ότι το επίπεδο παραλληλόγραμμο σχήμα και ξηρό, αλλά εξαιρετικά ακριβές περιεχόμενο - επίσης καλό και πρακτικό. Αλλά θα πρέπει να σημειωθεί ότι οι θέσεις των μονοπωλιακών επιχειρήσεων κολλήσει με το κύριο πράγμα τους - το πρόσωπο της εταιρείας, τη λειτουργικότητα και τη δύναμη της παραγωγής της. Πληροφορική τέρατα αισθάνθηκε ότι οι σελίδες προορισμού - είναι να αντιμετωπίσει τις μικρές επιχειρήσεις, αξεσουάρ, Herbalife και άλλες «κόσμημα».

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

Εξαιρετική λύση - AJAX (σελίδα ενημερώνεται ανάλογα με τις ανάγκες). Ακόμη πιο πολλά υποσχόμενη λύση, όταν η σελίδα δείχνει ότι είναι απαραίτητο σε αυτό το σημείο του παραθύρου του προγράμματος περιήγησης.

Στην πραγματικότητα, z-index - αυτό το απλό κανόνα CSS. Σκοπός του - για να δείξει το επίπεδο της ετικέτας, έτσι ώστε το πρόγραμμα περιήγησης μπορεί να προσδιορίσει πότε το στοιχείο της οθόνης και ποιο μέρος του αυτό το στοιχείο θα είναι ορατό. Layer και η σελίδα - μια πολύ σχετική έννοια, γιατί είναι προβληματικό να σχεδιάσει τη σελίδα και να έχετε κατά νου την έννοια του z-index κανόνα για διαφορετικές εμφάνιση του περιεχομένου.

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

Ωστόσο, αν η σημασιολογία κίνηση z-index σε ένα διάλογο με τον επισκέπτη, είναι δυνατόν να δημιουργηθεί ένα πρακτικό αποτέλεσμα. Παρόμοια με το πώς οι ετικέτες μπορεί να πάνω στο άλλο, είναι δυνατόν να επιβάλει ένα διάλογο (χώρος επισκέπτη) και να εκτελέσει την κίνηση μεταξύ τους. Από την άποψη αυτή, η εφαρμογή των κανόνων του z-index CSS φαίνεται να είναι πολύ εφικτό και πρακτικό.