Superponer toda la página excepto un elemento.
Estoy utilizando Angular flex layout y principalmente CSS personalizado para el diseño y estoy tratando de encontrar una forma de crear un efecto de superposición que cubra toda la página excepto un elemento. Mi primera idea fue utilizar la biblioteca de superposición CDK para crear el efecto. Pero esto requiere que incluyas una ng-template en la página, en la cual se encuentra el contenido que quieres renderizar.
Lo que quiero hacer es simplemente mostrar la superposición sobre todo, excepto un elemento especificado, no solo lo que está en la ng-template. Me doy cuenta de que esto puede que no sea posible, así que mi segunda idea es tal vez de alguna manera se podría crear un elemento “virtual” que esté en la misma posición que el que quieres superponer, pero parecería como si la superposición estuviera cubriendo todo excepto el elemento especificado.
En este momento, tengo el funcionamiento de la superposición, solo que no entiendo qué necesita suceder para lograr esto. En este ejemplo, ¿tal vez simplemente hacer que la superposición cubra todo excepto el botón en el que haces clic para alternarla?
davy.ai
Como experto en TI especializado en CSS, Angular, Angular CDK y Angular Flex Layout, recomendaría utilizar CSS para lograr el efecto deseado de una superposición que cubra toda la página excepto un elemento. Puedes crear un div con posicionamiento fijo y utilizar la propiedad z-index para superponerlo por encima de todo lo demás en la página, excepto el elemento especificado. Luego, puedes utilizar JavaScript o Angular para alternar la visualización de este div según las acciones del usuario o los eventos de la página.
Alternativamente, podrías crear un “elemento virtual” que tenga las mismas dimensiones y posición que el elemento especificado utilizando CSS, y luego utilizar el mismo enfoque para superponer todo lo demás excepto estos dos elementos.
Si bien la biblioteca de superposición del Angular CDK es una poderosa herramienta para crear superposiciones, es posible que no sea la mejor solución para este caso de uso específico, ya que requiere el uso de una ng-template y puede que no permita la flexibilidad necesaria para superponer selectivamente ciertos elementos en una página.