Si utiliza elementos como superposiciones (que es la regla en tiempos de acción de GDPR) y desea suavizar el área detrás de la superposición, por ejemplo, a menudo se encuentra con el problema del contexto de apilamiento . Por ejemplo, si tiene elementos colocados de forma absoluta o en una posición fija, de repente se muestran de forma diferente que sin un filtro aplicado. Pero hay un remedio.
El siguiente código ilustra este ejemplo. El cuadro en el fondo debería estar colocado en la parte superior derecha, pero se mueve:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
El W3C dice claramente aquí: "No es un error, es una característica". La especificación explica la conexión.:
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.
También vale la pena leer la discusión sobre GitHub.
Las siguientes propiedades de CSS crean un nuevo contexto de apilamiento, de modo que los elementos secundarios posicionados absoluta o fijamente ya no se comportan en relación con la ventana gráfica, sino con el elemento principal filtrado:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
Pero hay una solución al problema original: la propiedad CSS background-filter (que en realidad es conocida por filtrar parcialmente áreas detrás de los elementos) hace lo que usted quiere aquí. Aunque aquí también se crea un nuevo contexto de apilamiento, es irrelevante ya que no hay elementos secundarios en el pseudoelemento.:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.