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 itt egyértelműen azt mondja: "Ez nem hiba, hanem szolgáltatás." A specifikáció elmagyarázza a csatlakozást:
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 backdrop-filter (amely valójában az elemek mögötti területek részleges szűréséről ismert) itt azt csinál, amit akarsz. Bár itt is létrejön egy új halmozási kontextus, ennek nincs jelentősége, mivel az álelemben nincsenek gyermekelemek:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.