قم بطمس الصفحة خلف التراكب باستخدام CSS

إذا كنت تستخدم عناصر مثل التراكبات (وهي القاعدة في أوقات إجراءات اللائحة العامة لحماية البيانات) وتريد تخفيف المنطقة خلف التراكب ، على سبيل المثال ، غالبًا ما تصادف مشكلة سياق التكديس . على سبيل المثال ، إذا كان لديك عناصر موضوعة بشكل مطلق أو في موضع ثابت ، فسيتم عرضها فجأة بشكل مختلف عن عدم تطبيق مرشح. لكن هناك علاج.


يوضح الكود التالي هذا المثال. يجب وضع المربع الموجود في الخلفية في أعلى اليمين بالفعل ، ولكن يتم تحريكه:

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.

عودة