যদি আপনি ওভারলেগুলির মতো উপাদান ব্যবহার করেন (যা জিডিপিআর অ্যাকশনিজমের সময়ে নিয়ম হয়) এবং ওভারলেটির পিছনের অঞ্চলটি নরম করতে চান, উদাহরণস্বরূপ, আপনি প্রায়শই স্ট্যাকিং প্রসঙ্গে সমস্যাটি উপস্থিত হন। উদাহরণস্বরূপ, যদি আপনার উপাদানগুলি একেবারে বা একটি নির্দিষ্ট অবস্থানে থাকে তবে হঠাৎ প্রয়োগকৃত ফিল্টার ছাড়াই এগুলি আলাদাভাবে প্রদর্শিত হয়। তবে এর প্রতিকারও রয়েছে।
নিম্নলিখিত কোডটি এই উদাহরণটিকে ব্যাখ্যা করে। পটভূমির বাক্সটি আসলে উপরের ডানদিকে অবস্থিত হওয়া উচিত তবে এটি সরানো হয়েছে:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
ডাব্লু 3 সি স্পষ্টভাবে বলেছে: "এটি কোনও বাগ নয়, এটি একটি বৈশিষ্ট্য।" । স্পেসিফিকেশন সম্পর্ক ব্যাখ্যা করে:
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.
গিটহাবের আলোচনাও পড়ার মতো।
নিম্নলিখিত সিএসএস বৈশিষ্ট্যগুলি একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করে, যাতে একেবারে বা স্থিরভাবে স্থিত শিশু উপাদানগুলি আর ভিউপোর্টের সাথে তুলনামূলক আচরণ না করে, তবে ফিল্টারকৃত মূল উপাদানগুলির সাথে সম্পর্কিত হয়:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
তবে মূল সমস্যার সমাধান রয়েছে: সিএসএস সম্পত্তি ব্যাকড্রপ-ফিল্টার (যা আসলে উপাদানগুলির পিছনে আংশিক ফিল্টারিং জন্য পরিচিত) কাজটি করে। এখানে একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করা হয়েছে, তবে ছদ্ম-উপাদানটিতে কোনও শিশু উপাদান নেই বলে এটি অপ্রাসঙ্গিক is:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.