যদি আপনি ওভারলেগুলির মতো উপাদান ব্যবহার করেন (যা জিডিপিআর অ্যাকশনিজমের সময়ে নিয়ম হয়) এবং ওভারলেটির পিছনের অঞ্চলটি নরম করতে চান, উদাহরণস্বরূপ, আপনি প্রায়শই স্ট্যাকিং প্রসঙ্গে সমস্যাটি উপস্থিত হন। উদাহরণস্বরূপ, যদি আপনার উপাদানগুলি একেবারে বা একটি নির্দিষ্ট অবস্থানে থাকে তবে হঠাৎ প্রয়োগকৃত ফিল্টার ছাড়াই এগুলি আলাদাভাবে প্রদর্শিত হয়। তবে এর প্রতিকারও রয়েছে।
নিম্নলিখিত কোডটি এই উদাহরণটিকে ব্যাখ্যা করে। পটভূমির বাক্সটি আসলে উপরের ডানদিকে অবস্থিত হওয়া উচিত তবে এটি সরানো হয়েছে:
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.
গিটহাবের আলোচনাও পড়ার মতো।
নিম্নলিখিত সিএসএস বৈশিষ্ট্যগুলি একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করে, যাতে একেবারে বা স্থিরভাবে স্থিত শিশু উপাদানগুলি আর ভিউপোর্টের সাথে তুলনামূলক আচরণ না করে, তবে ফিল্টারকৃত মূল উপাদানগুলির সাথে সম্পর্কিত হয়:
- 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.