Nëse përdorni elementë të tillë si mbivendosjet (që është rregulli në kohën e veprimit të GDPR) dhe dëshironi të zbusni zonën prapa mbivendosjes, për shembull, shpesh hasni në problemin e kontekstit të grumbullimit . Për shembull, nëse keni elementë të pozicionuar absolutisht ose në një pozicion fiks, ato papritmas do të shfaqen ndryshe sesa pa një filtër të aplikuar. Por ka një ilaç.
Kodi i mëposhtëm ilustron këtë shembull. Kutia në sfond duhet të vendoset në të djathtë lart, por ajo është zhvendosur:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
W3C thotë qartë këtu: "Nuk është një gabim, është një veçori." Specifikimi shpjegon lidhjen:
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.
Diskutimi në GitHub gjithashtu vlen të lexohet.
Karakteristikat e mëposhtme të CSS krijojnë një kontekst të ri grumbullimi, në mënyrë që elementët fëmijë të pozicionuar në mënyrë absolute ose fikse të mos sillen më në krahasim me pamjen e shikimit, por me elementin prind të filtruar:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
Por ka një zgjidhje për problemin origjinal: Filtri i sfondit të pronës CSS (i cili në fakt njihet për filtrimin pjesërisht të zonave pas elementeve) bën atë që dëshironi këtu. Megjithëse këtu krijohet gjithashtu një kontekst i ri grumbullimi, ai është i parëndësishëm pasi nuk ka elementë fëmijë në pseudoelementin:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.