Եթե օգտագործում եք այնպիսի տարրեր, ինչպիսիք են ծածկույթները (ինչը կանոն է GDPR ակցիոնիզմի ժամանակաշրջանում) և ցանկանում եք մեղմացնել ծածկույթի հետևի հատվածը, օրինակ, դուք հաճախ բախվում եք կուտակման համատեքստի խնդրի: Օրինակ, եթե դուք ունեք տարրեր, որոնք տեղակայված են բացարձակապես կամ ֆիքսված դիրքում, դրանք հանկարծ ցուցադրվում են այլ կերպ, քան առանց կիրառական ֆիլտրի: Բայց կա դեղամիջոց:
Հետևյալ կոդը ցույց է տալիս այս օրինակը: Ֆոնի վրա գտնվող տուփը պետք է տեղադրված լինի վերևի աջ մասում, բայց այն տեղափոխվում է:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
W3C- ն հստակ ասում է. «Դա սխալ չէ, դա առանձնահատկություն է»: , The շտումը բացատրում է հարաբերությունները:
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.