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 mówi tutaj wyraźnie: „To nie jest błąd, to jest funkcja”. Specyfikacja wyjaśnia połączenie:
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
Istnieje jednak rozwiązanie pierwotnego problemu: właściwość CSS backdrop-filter (znana z częściowego filtrowania obszarów za elementami) robi tutaj to, co chcesz. Chociaż tutaj tworzony jest również nowy kontekst układania, jest on nieistotny, ponieważ w pseudoelemencie nie ma elementów potomnych:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.