A camada superior fica acima da document relacionada na janela de visualização do navegador, e cada document tem uma camada superior associada. Isso significa que os elementos promovidos para a camada superior não precisam se preocupar com a hierarquia z-index ou DOM. Eles também recebem um pseudoelemento ::backdrop legal para brincar. A especificação da API Fullscreen (link em inglês) traz mais detalhes, já que a Tela cheia foi um ótimo exemplo da camada superior em uso antes do surgimento do suporte para dialog.
A camada superior ajuda a resolver o problema de renderização de conteúdo acima do restante do document.
Lembretes importantes:
- A camada superior está fora do fluxo de document.
- z-index não tem efeito na camada superior.
- Cada elemento da camada superior tem um pseudoelemento ::backdrop estilizável.
- Cada elemento e ::backdrop geram um novo contexto de empilhamento.
- Os elementos da camada superior são empilhados na ordem em que aparecem no conjunto. A última entrada aparece na parte superior. Se você quiser promover um elemento, remova-o e adicione-o novamente.
Como imitamos a camada superior até agora? Não é incomum ver os desenvolvedores descartando um elemento de contêiner vazio no final do body. Isso vai ser usado como uma "falso" na camada superior. A ideia é que esse contêiner seja posicionado acima de tudo na pilha. Quando quiser promover algo acima de tudo, anexe isso ao contêiner. Isso pode ser visto em pacotes populares, como SweetAlert, reactjs-popup, Magnific Pop, entre outros.
Com novos componentes integrados e APIs como <dialog> e "Popover", você não precisa recorrer a essas soluções alternativas. Você pode promover conteúdo para a camada superior.
As estruturas de interface nos permitem colocalizar os elementos promovidos com os componentes correspondentes. No entanto, eles costumam ser separados no DOM quando se trata de renderização.
Ao usar a camada superior, os elementos promovidos ficam onde você os coloca no código-fonte (por exemplo, um <dialog>). Não importa quantas camadas abaixo no DOM o elemento está. Ele será promovido para a camada superior e você poderá inspecioná-lo onde espera que esteja, colocalizado com o HTML do componente. Isso facilita a inspeção do elemento acionador e do elemento promovido no DOM ao mesmo tempo. Particularmente útil se o elemento do acionador estiver fazendo atualizações de atributos, por exemplo. Isso também traz mais benefícios para a acessibilidade, já que os elementos estão posicionados no mesmo lugar.
Para ilustrar a camada superior em comparação com a z-index alta, considere esta demonstração.
Nesta demonstração, é possível abrir um pop-up do SweetAlert e também uma <dialog> de camada superior. Abra a <dialog> e tente abrir o pop-up do SweetAlert. Você verá que ele aparece abaixo do elemento da camada superior. E a raiz do pop-up do SweetAlert é usar um z-index de 10.000 com position: fixed.
.swal-overlay {
z-index: 10000;
position: fixed;
}
Não é necessário aplicar estilos ao <dialog> para que ele apareça acima de todos os outros conteúdos.
DevTools
Isso nos leva ao suporte ao DevTools. O Chrome DevTools está adicionando suporte para elementos da camada superior para que você possa inspecionar a camada superior. Isso facilita a depuração e a visualização de como as coisas estão se acumulando na camada superior ou o que está na camada superior.
Alina Varkki tem um ótimo artigo que detalha o uso dessas ferramentas. No momento, elas estão disponíveis como um recurso de pré-lançamento no Chrome Canary versão 105.
Pronto.
Uma breve introdução à camada superior. Possibilitar dizer "Tchau!" a coisas como:
.popup-container {
z-index: 10000;
}
O que você colocaria na camada superior? Você testou o dialog? Ou conferiu a API OpenUI Popover? Conte para nós.