Jeśli korzystasz z elementów takich jak nakładki (co jest regułą w czasach RODO) i chcesz np. Zmiękczyć obszar za nakładką, często napotykasz problem kontekstu stackingu . Na przykład, jeśli masz elementy ustawione absolutnie lub w stałej pozycji, nagle są one wyświetlane inaczej niż bez zastosowanego filtra. Ale jest lekarstwo.
Poniższy kod ilustruje ten przykład. Ramka w tle powinna faktycznie znajdować się w prawym górnym rogu, ale została przesunięta:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
W3C jasno mówi: „To nie jest błąd, to funkcja”. . Specyfikacja wyjaśnia związek:
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.
Warto również przeczytać dyskusję na GitHubie.
Następujące właściwości CSS tworzą nowy kontekst stosu, dzięki czemu elementy potomne pozycjonowane bezwzględnie lub na stałe nie zachowują się już względem widoku, ale przefiltrowanego elementu nadrzędnego:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
Ale jest rozwiązanie pierwotnego problemu: filtr tła właściwości CSS (który jest tak naprawdę znany z częściowego filtrowania obszarów za elementami) robi to, czego chcemy. Generowany jest tu również nowy kontekst układania, ale jest to nieistotne, ponieważ w pseudoelemencie nie ma elementów potomnych:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.