Ha olyan elemeket használ, mint az átfedések (ez a szabály a GDPR-akcionizmus idején), és például meg akarja enyhíteni az átfedés mögötti területet, gyakran találkozik a halmozási kontextus problémájával. Például, ha elemei abszolút vagy rögzített helyzetben vannak, akkor hirtelen másképp jelennek meg, mint alkalmazott szűrő nélkül. De van egy orvosság.
A következő kód szemlélteti ezt a példát. A háttérben lévő mezőt a jobb felső sarokban kell elhelyezni, de az áthelyezve van:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
A W3C világosan mondja: "Ez nem hiba, hanem egy szolgáltatás." . A specifikáció elmagyarázza a kapcsolatot:
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.
A GitHubról szóló vitát is érdemes elolvasni.
A következő CSS tulajdonságok új halmozási környezetet hoznak létre, így az abszolút vagy rögzítetten elhelyezett gyermekelemek már nem a nézetablakhoz, hanem a szűrt szülőelemhez viszonyulnak:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
De van megoldás az eredeti problémára: A CSS tulajdonság -háttérszűrő (amely valójában az elemek mögötti területek részleges szűrésére ismert) azt csinálja, amit itt akarunk. Itt új generációs kontextus is generálódik, de ez nem releváns, mivel az álelemben nincsenek gyermek elemek:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.