Εάν χρησιμοποιείτε στοιχεία όπως επικαλύψεις (που είναι ο κανόνας σε περιόδους ακτιβισμού του 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.