Եթե օգտագործում եք այնպիսի տարրեր, ինչպիսիք են ծածկույթները (ինչը կանոն է 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- ի քննարկումը նույնպես արժե կարդալ:
Հետևյալ 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.