यदि आप ओवरले (जैसे कि 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 पर चर्चा भी पढ़ने लायक है।
निम्नलिखित सीएसएस गुण एक नया स्टैकिंग प्रसंग बनाते हैं, ताकि बिल्कुल सही या निश्चित रूप से तैनात बच्चे तत्व अब व्यूपोर्ट के सापेक्ष व्यवहार न करें, लेकिन फ़िल्टर किए गए मूल तत्व के लिए:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
लेकिन मूल समस्या का समाधान है: सीएसएस संपत्ति पृष्ठभूमि-फ़िल्टर (जो वास्तव में तत्वों के पीछे आंशिक रूप से फ़िल्टर करने वाले क्षेत्रों के लिए जाना जाता है) वह करता है जो हम यहां चाहते हैं। एक नया स्टैकिंग प्रसंग भी यहाँ बनाया गया है, लेकिन यह अप्रासंगिक है क्योंकि छद्म तत्व में कोई बाल तत्व नहीं हैं:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.