La capa superior se encuentra sobre su 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 necesitan preocuparse por z-index ni por la jerarquía del DOM. También obtienen un excelente seudoelemento ::backdrop con el que pueden jugar. En la especificación de la API de pantalla completa, se profundiza en los detalles, ya que Pantalla completa era un excelente ejemplo de la capa superior en uso antes de que llegara la compatibilidad con dialog.
La capa superior ayuda a resolver el problema de renderizar contenido por encima del resto de document.
Puntos importantes que debes recordar:
- La capa superior está fuera del flujo de document.
- z-index no tiene ningún 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 de ellos aparece en la parte superior. Si deseas promocionar un elemento, quítalo y vuelve a agregarlo.
¿Cómo imitamos la capa superior hasta ahora? No es inusual ver que los desarrolladores descartan un elemento de contenedor vacío al final de body. Se usará como capa superior “falso”. La idea es que este contenedor se ubique por encima de todo lo demás en la pila. Si deseas promocionar algo por encima de todo lo demás, debes agregarlo al contenedor. Podemos verlo en paquetes populares como SweetAlert, reactjs-popup, Magnific Popup y otros.
Con las nuevas APIs y los componentes integrados, como <dialog> y "Popover", no tendrás que recurrir a estas soluciones alternativas. Puedes promocionar contenido en la capa superior.
Los frameworks de la IU nos permiten ubicar los elementos promocionados con sus equivalentes de los componentes. Sin embargo, a menudo se separan en el DOM cuando se trata de renderización.
Al usar la capa superior, los elementos promocionados son el lugar donde los colocas en tu código fuente (por ejemplo, un <dialog>). No importa en cuántas capas del DOM se encuentre el elemento. Este se ascenderá a la capa superior y podrás inspeccionarlo donde esperas que esté, ubicado junto con el HTML de tu componente. Esto facilita la inspección del elemento activador y el elemento promocionado en el DOM al mismo tiempo. Esto es particularmente útil, por ejemplo, si el 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 la z-index alta, 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 de nuestro elemento de capa superior. Y la raíz de nuestra ventana emergente de SweetAlert está usando un z-index de 10000 con position: fixed.
.swal-overlay {
z-index: 10000;
position: fixed;
}
No es necesario aplicar ningún estilo a la <dialog> para que aparezca encima del resto del contenido.
DevTools
Eso nos lleva a la asistencia de Herramientas para desarrolladores. Las Herramientas para desarrolladores de Chrome están agregando compatibilidad con elementos de la capa superior para que pueda inspeccionar la capa superior. Esto facilita la depuración y la visualización de la forma en que se agrupan los elementos en la capa superior o incluso en la capa superior.
Alina Varkki tiene un excelente artículo que profundiza en el uso de estas herramientas. Actualmente están disponibles como una función de vista previa en la versión 105 de Chrome Canary.
Eso es todo.
Una breve introducción a la capa superior. Ahora es posible decir "¡Adiós!" para cosas como las siguientes:
.popup-container {
z-index: 10000;
}
¿Qué incluiría en la capa superior? ¿Probaste dialog? ¿O revisaste la API de ventana emergente de OpenUI? Infórmanos al respecto.