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ë: "Nuk është një defekt, është një tipar". . Specifikimi shpjegon marrëdhënien:
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 ekziston një zgjidhje për problemin origjinal: Filtri i sfondit të pronës CSS (i cili në të vërtetë njihet për filtrimin pjesërisht të zonave prapa elementeve) bën atë që duam këtu. Një kontekst i ri grumbullimi është krijuar gjithashtu këtu, por kjo është e parëndësishme pasi nuk ka elementë fëmijë në pseudo-elementin:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.