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: "No es un error, es una característica". . La especificación explica la relació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 backdrop-filter (que en realidad es conocida por filtrar parcialmente las áreas detrás de los elementos) hace lo que queremos aquí. Aquí también se crea un nuevo contexto de apilamiento, pero esto es irrelevante ya que no hay elementos secundarios en el pseudo-elemento:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.