Επίπεδα CSS, απόλυτη και σχετική τοποθέτηση, z-index. Άλλο ένα ανεξάρτητο blog

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

σύντομες πληροφορίες

Σημειογραφία

	Περιγραφή	Παράδειγμα
<тип>	Καθορίζει τον τύπο της τιμής.	<размер>
A&&B	Οι τιμές πρέπει να εξάγονται με την καθορισμένη σειρά.	<размер> && <цвет>
A | σι	Υποδεικνύει ότι πρέπει να επιλεγεί μόνο μία από τις προτεινόμενες τιμές (A ή B).	κανονικό | μικρά καπάκια
Α || σι	Κάθε τιμή μπορεί να χρησιμοποιηθεί μόνη της ή σε συνδυασμό με άλλες με οποιαδήποτε σειρά.	πλάτος || μετρώ
	Ομαδικές αξίες.	[ καλλιέργεια || σταυρός]
*	Επαναλάβετε μηδέν ή περισσότερες φορές.	[,<время>]*
+	Επαναλάβετε μία ή περισσότερες φορές.	<число>+
?	Ο καθορισμένος τύπος, λέξη ή ομάδα είναι προαιρετική.	ένθεση?
(Α, Β)	Επαναλάβετε τουλάχιστον Α, αλλά όχι περισσότερες από Β φορές.	<радиус>{1,4}
#	Επαναλάβετε μία ή περισσότερες φορές χωρισμένες με κόμμα.	<время>#

×

Αξίες

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

Εκτός από τις αριθμητικές τιμές, χρησιμοποιείται το auto - η σειρά των στοιχείων σε αυτήν την περίπτωση δημιουργείται αυτόματα με βάση τη θέση τους στον κώδικα HTML και που ανήκουν στον γονέα, καθώς τα θυγατρικά στοιχεία έχουν τον ίδιο αριθμό με το γονικό τους στοιχείο.

Παράδειγμα

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

Ρύζι. 1. Αλλάξτε τη σειρά των καρτών

Μοντέλο αντικειμένου

Ενα αντικείμενο.στυλ.zΕυρετήριο

Σημείωση

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

Ο Internet Explorer έως την έκδοση 7.0 ερμηνεύει το auto ως 0.

Στον Firefox έως και την έκδοση 2.0, μια αρνητική τιμή z-index τοποθετεί ένα στοιχείο κάτω από το φόντο της ιστοσελίδας και του περιεχομένου της.

Προσδιορισμός

Κάθε προδιαγραφή περνά από διάφορα στάδια έγκρισης.

• Σύσταση (Σύσταση) - η προδιαγραφή έχει εγκριθεί από το W3C και συνιστάται ως πρότυπο.
• Σύσταση υποψηφίου ( Πιθανή σύσταση) - η ομάδα που είναι υπεύθυνη για το πρότυπο είναι ικανοποιημένη που εκπληρώνει τους στόχους της, αλλά απαιτείται η υποστήριξη της κοινότητας ανάπτυξης για την εφαρμογή του προτύπου.
• Προτεινόμενη σύσταση ( Προτεινόμενη σύσταση) - σε αυτό το στάδιο, το έγγραφο υποβάλλεται στη Συμβουλευτική Επιτροπή του W3C για τελική έγκριση.
• Σχέδιο εργασίας - Ένα πιο ώριμο προσχέδιο μετά από συζήτηση και τροποποιήσεις για κοινοτική αναθεώρηση.
• προσχέδιο του συντάκτη ( Εκδοτικό προσχέδιο) είναι μια πρόχειρη έκδοση του προτύπου μετά την πραγματοποίηση αλλαγών από τους συντάκτες του έργου.
• προσχέδιο ( Προσχέδιο προδιαγραφών) είναι η πρώτη πρόχειρη έκδοση του προτύπου.

×

Το πρόβλημα με το z-index είναι ότι πολλοί άνθρωποι απλά δεν καταλαβαίνουν πώς λειτουργεί.
Όλα όσα περιγράφονται παρακάτω είναι στις προδιαγραφές του W3C. Δυστυχώς δεν το διαβάζουν όλοι.

Περιγραφή του προβλήματος:

Λοιπόν, ας πούμε ότι έχουμε έναν κώδικα HTML που αποτελείται από 3 στοιχεία.
Κάθε ένα από αυτά περιέχει ένα μέσα. Και το καθένα, με τη σειρά του, έχει το δικό του φόντο: κόκκινο, πράσινο και μπλε, αντίστοιχα. Επιπλέον, το καθένα είναι τοποθετημένο στο απόλυτο επάνω αριστερό μέρος του εγγράφου με τέτοιο τρόπο ώστε να επικαλύπτει ελαφρώς το επόμενο. Το πρώτο έχει z-index 1, οι άλλοι δύο δεν έχουν σύνολο z-index.

Παρακάτω είναι ο κώδικας HTML με βασικό στυλ css.

το κόκκινο

Πράσινος

Μπλε

.κόκκινο, .πράσινο, .μπλε (θέση: απόλυτη; ) .κόκκινο ( φόντο: κόκκινο; δείκτης z: 1; ) .πράσινο ( φόντο: πράσινο; ) .μπλε ( φόντο: μπλε; )
Παράδειγμα jsfiddle

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

• Δεν είναι δυνατή η αλλαγή της σήμανσης HTML
• Δεν είναι δυνατή η αλλαγή/προσθήκη του δείκτη z σε στοιχεία
• Δεν είναι δυνατή η αλλαγή/προσθήκη θέσης σε στοιχεία

Λύση:

Η λύση είναι να προσθέσετε μια διαφάνεια ελαφρώς μικρότερη από μία στην πρώτη (γονική του κόκκινου).
Εδώ είναι το css που δείχνει αυτό:
div:first-child ( αδιαφάνεια: .99; )

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

Σειρά στοίβαξης στοιχείων:

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

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

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

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

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

Περιβάλλον επικάλυψης

Τα στοιχεία με κοινούς γονείς που μετακινούνται προς τα εμπρός ή προς τα πίσω είναι συλλογικά γνωστά ως πλαίσιο στοίβαξης. Η κατανόηση του περιβάλλοντος στοίβαξης είναι το κλειδί για την κατανόηση του δείκτη z και της σειράς στοίβαξης των στοιχείων.

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

Ένα νέο πλαίσιο μπορεί να διαμορφωθεί στις ακόλουθες περιπτώσεις:

• Εάν το στοιχείο είναι το ριζικό στοιχείο του εγγράφου (στοιχείο)
  Εάν το στοιχείο δεν είναι τοποθετημένο στατικά και η τιμή του δείκτη z δεν είναι ίση με το auto
  Εάν το στοιχείο έχει διαφάνεια μικρότερη από 1

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

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

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

Τι είναι?

Ιδιοκτησία z-δείκτηςορίζει το επίπεδο στοίβας του στοιχείου HTML. Το "επίπεδο στοίβας" αναφέρεται στη θέση του στοιχείου στον άξονα z (άμεσα κάθετα στον άξονα x ή στον άξονα y). Το στοιχείο με την υψηλότερη τιμή δείκτη z θα τοποθετηθεί στην κορυφή της στοίβας επιπέδων. Αυτή η στοίβα στρώματος είναι τοποθετημένη κάθετα στην οθόνη ή στη θύρα προβολής.

Τρισδιάστατη αναπαράσταση του άξονα Z:

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

Κανονική σειρά στοίβας

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

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

Όταν η ιδιότητα z-index χρησιμοποιείται σωστά, μπορεί να αλλάξει την κανονική σειρά στοίβας.

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

γκρι μπλοκ

μπλε μπλοκ

καφέ μπλοκ

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

Γιατί υπάρχει σύγχυση;

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

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

γκρι μπλοκ

μπλε μπλοκ

καφέ μπλοκ

Το γκρι πλαίσιο έχει τον δείκτη z του σε "9999" . μπλε πλαίσιο, ο δείκτης z έχει οριστεί σε "500" ; και το καφέ πλαίσιο, η τιμή του δείκτη z έχει οριστεί σε "1" . Θα ήταν λογικό να υποθέσουμε ότι η σειρά με την οποία στοιβάζονται τα μπλοκ θα πρέπει να αλλάξει. Αλλά αυτό δεν συνέβη σε αυτό το παράδειγμα επειδή σε κανένα από αυτά τα στοιχεία δεν έχει εκχωρηθεί μια ιδιότητα θέσης.

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

γκρι μπλοκ

μπλε μπλοκ

καφέ μπλοκ

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

Σύνταξη

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

Έτσι φαίνεται ο κώδικας CSS για το τρίτο παράδειγμα, όπου η ιδιότητα z-index εφαρμόζεται σωστά:

#grey_box ( πλάτος: 200 px; ύψος: 200 px; περίγραμμα: συμπαγές 1px #cccc; φόντο: #ddd; θέση: σχετικό; z-index: 9999; ) #blue_box (πλάτος: 200 px; ύψος: 200 px; περίγραμμα: συμπαγές 1px # 4a7497; φόντο: #8daac3; θέση: σχετική; δείκτης z: 500; ) #gold_box (πλάτος: 200 px; ύψος: 200 px; περίγραμμα: συμπαγές 1px #8b6125; φόντο: #ba945d; θέση: σχετικό; δείκτης z: 1 ;)

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

Χρήση JavaScript

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

Var myElement = document.getElementById("gold_box"); myElement.style.position = "συγγενής"; myElement.style.zIndex = "9999";

Όπως φαίνεται στο παράδειγμα, η ιδιότητα CSS " z-index " γράφεται ως " zIndex ". Ομοίως, το " background-color " γίνεται " backgroundColor ", το " font-weight " γίνεται " fontWeight ", και ούτω καθεξής.

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

Λανθασμένος χειρισμός σε IE και Firefox

Υπό ορισμένες συνθήκες, σε ορισμένα προγράμματα περιήγησης, η ιδιότητα z-index μπορεί να αντιμετωπίζεται διαφορετικά, αυτό ισχύει για τον Internet Explorer, τις εκδόσεις 6 και 7 και την έκδοση 2 του Firefox.

Στοιχεία

στο IE6

Στον Internet Explorer 6, το στοιχείο εμφανίζεται πάντα στην κορυφή της σειράς στρώματος, σπάζοντας την κανονική σειρά, τις τιμές θέσης ή τον δείκτη z. Αυτό το πρόβλημα φαίνεται στην παρακάτω εικόνα:

Στοιχείο

εμφανίζεται πρώτο στην κανονική σειρά επιπέδου και έχει τιμή δείκτη z "1" μαζί με τιμή ιδιότητας θέσης σχετική . Το καφέ πλαίσιο εμφανίζεται δεύτερο κατά σειρά στρώματος και του εκχωρείται μια ιδιότητα z-index "9999". Σύμφωνα με τον κανόνα της κανονικής σειράς επιπέδων και τις αντιστοιχισμένες ιδιότητες z-index, το καφέ πλαίσιο πρέπει να επικαλύπτει το στοιχείο , το οποίο συμβαίνει σε όλα τα τρέχοντα προγράμματα περιήγησης εκτός από το IE6:

– Επιλέξτε έτος – 2009 2010 2011

καφέ μπλοκ

Εάν δείτε αυτό το παράδειγμα χρησιμοποιώντας το πρόγραμμα περιήγησης IE6, θα δείτε ότι το στοιχείο

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

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