La capa superior se encuentra sobre su elemento document relacionado en el viewport del navegador, y cada document tiene una capa superior asociada. Esto significa que los elementos que se promueven a la capa superior no deben preocuparse por la jerarquía de z-index ni del DOM. También obtienen un interesante seudoelemento ::backdrop para jugar. La especificación de la API de Fullscreen entra en más detalles, ya que Fullscreen era un excelente ejemplo de la capa superior que se usaba antes de la compatibilidad con dialog.
La capa superior ayuda a resolver el problema de renderización de contenido sobre el resto de document.
Estos son algunos puntos importantes que debes recordar:
- La capa superior está fuera del flujo document.
- z-index no tiene efecto en la capa superior.
- Cada elemento de la capa superior tiene un seudoelemento ::backdrop con estilo.
- Cada elemento y ::backdrop generan un nuevo contexto de apilado.
- Los elementos de la capa superior se apilan en el orden en que aparecen en el conjunto. El último que se muestra aparece en la parte superior. Si quieres promover un elemento, quítalo y vuelve a agregarlo.
¿Cómo imitamos la capa superior hasta ahora? No es inusual ver que los desarrolladores descarten un elemento de contenedor vacío al final de body. Esto se usará como una “falsificación” capa superior. La idea es que este contenedor se posiciona por encima de todo lo demás en la pila. Cuando desees promover algo por encima de todo lo demás, lo agregas a ese contenedor. Podemos verlo en paquetes populares, como SweetAlert, reactjs-popup, Magnific Popup y otros.
Con los nuevos componentes y APIs integrados, como <dialog> y "Popover", no necesitarás recurrir a estas soluciones alternativas. Puedes promocionar contenido a la capa superior.
Los frameworks de IU nos permiten ubicar los elementos promocionados con sus contrapartes componentes. Sin embargo, a menudo se separan en el DOM cuando se trata de la renderización.
Si usas la capa superior, los elementos promocionados están donde los colocas en tu código fuente (por ejemplo, un <dialog>). No importa cuántas capas hacia abajo en el DOM se encuentre el elemento. Se trasladará a la capa superior y podrás inspeccionarlo donde esperas, ubicado junto con el HTML de tu componente. Esto facilita la inspección del elemento desencadenante y el elemento promovido en el DOM al mismo tiempo. Por ejemplo, es particularmente útil si tu elemento activador realiza actualizaciones de atributos. Esto también tiene un beneficio adicional para la accesibilidad ahora que los elementos están ubicados en el mismo lugar.
Para ilustrar la capa superior en comparación con los z-index altos, considera esta demostración.
En esta demostración, puedes abrir una ventana emergente de SweetAlert y también una capa superior <dialog>. Abre <dialog> y, luego, intenta abrir la ventana emergente de SweetAlert. Verás que aparece debajo del elemento de nuestra capa superior. Y la raíz de nuestra ventana emergente de SweetAlert es el uso de un z-index de 10,000 con position: fixed.
.swal-overlay {
z-index: 10000;
position: fixed;
}
No es necesario que apliques ningún estilo a la <dialog> para que aparezca sobre todo el contenido.
Herramientas para desarrolladores
Eso nos lleva a la compatibilidad con Herramientas para desarrolladores. Las Herramientas para desarrolladores de Chrome están agregando compatibilidad con los elementos de la capa superior para que puedas inspeccionar la capa superior. Esto facilita la depuración y visualización de cómo se acumulan los elementos en la capa superior o, incluso, lo que aparece en la capa superior.
Alina Varkki tiene un excelente artículo que profundiza en el uso de estas herramientas. Actualmente, están disponibles como función de vista previa en la versión 105 de Chrome Canary.
Eso es todo.
Una breve introducción a la capa superior. Permite decir "¡Adiós!" a aspectos como los siguientes:
.popup-container {
z-index: 10000;
}
¿Qué deberías enviar a la capa superior? ¿Probaste dialog? ¿O revisaste la API de OpenUI Popover? Dinos si necesitas más ayuda.