Εάν χρησιμοποιείτε στοιχεία όπως επικαλύψεις (που είναι ο κανόνας σε περιόδους ακτιβισμού του GDPR) και θέλετε να μαλακώσετε την περιοχή πίσω από την επικάλυψη, για παράδειγμα, συχνά συναντάτε το πρόβλημα του περιβάλλοντος στοίβαξης . Για παράδειγμα, εάν έχετε στοιχεία τοποθετημένα απολύτως ή σε σταθερή θέση, εμφανίζονται ξαφνικά διαφορετικά από ό, τι χωρίς ένα εφαρμοσμένο φίλτρο. Υπάρχει όμως μια θεραπεία.
Ο παρακάτω κώδικας απεικονίζει αυτό το παράδειγμα. Το πλαίσιο στο παρασκήνιο θα πρέπει στην πραγματικότητα να τοποθετηθεί επάνω δεξιά, αλλά μετακινείται:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
Το W3C λέει ξεκάθαρα: "Δεν είναι σφάλμα, είναι ένα χαρακτηριστικό." . Η προδιαγραφή εξηγεί τη σχέση:
A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in the order provided.
Αξίζει επίσης να διαβάσετε τη συζήτηση για το GitHub.
Οι ακόλουθες ιδιότητες CSS δημιουργούν ένα νέο περιβάλλον στοίβαξης, έτσι ώστε τα θυγατρικά στοιχεία απόλυτα ή σταθερά τοποθετημένα να μην συμπεριφέρονται πλέον σε σχέση με τη θύρα προβολής, αλλά με το φιλτραρισμένο γονικό στοιχείο:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
Αλλά υπάρχει μια λύση στο αρχικό πρόβλημα: Το φίλτρο σκηνικού ιδιοτήτων CSS (το οποίο είναι πραγματικά γνωστό για μερικό φιλτράρισμα περιοχών πίσω από στοιχεία) κάνει αυτό που θέλουμε εδώ. Δημιουργείται επίσης ένα νέο περιβάλλον στοίβαξης, αλλά αυτό δεν έχει σημασία, καθώς δεν υπάρχουν θυγατρικά στοιχεία στο ψευδο-στοιχείο:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.