A camada superior fica acima das document relacionadas 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 têm um pseudoelemento ::backdrop legal para usar. A especificação da API Fullscreen entra em mais detalhes, já que a Tela cheia foi um ótimo exemplo da camada superior em uso antes da criação do suporte para dialog.
A camada superior ajuda a resolver o problema de renderização de conteúdo acima do restante do document.
É importante lembrar:
- A camada superior está fora do fluxo document.
- z-index não tem efeito na camada superior.
Cada elemento na camada de cima tem um pseudoelemento ::backdrop estilizado.
Cada elemento e ::backdrop gera um novo contexto de empilhamento.
- Os elementos da camada superior são empilhados na ordem em que aparecem no conjunto. O último recebido aparece no topo. Se você quiser promover um elemento, remova e adicione novamente.
Como imitamos a camada superior até agora? Não é incomum que os desenvolvedores descartam um elemento de contêiner vazio no final da body. Depois disso, ela será usada como uma camada superior "falsa". A ideia é que esse contêiner seja posicionado acima de todo o restante na pilha. Quando você quer promover algo acima de tudo, anexe-o a esse contêiner. Isso pode ser encontrado em pacotes conhecidos, como SweetAlert, reactjs-popup, Magnific Popup e outros.
Com os novos componentes e APIs integrados, como <dialog> e "Popover", você não precisará recorrer a essas soluções alternativas. Você pode promover o conteúdo para a camada superior.
Os frameworks de interface nos permitem colocalizar os elementos promovidos com os componentes correspondentes. No entanto, eles geralmente são separados no DOM quando se trata de renderização.
Ao usar a camada superior, os elementos promovidos são onde você os coloca no seu código-fonte (por exemplo, uma <dialog>). Não importa quantas camadas o elemento está no DOM. Ele será promovido para a camada superior e você poderá inspecioná-lo onde esperado, colocalizado com o HTML do componente. Isso facilita a inspeção simultânea do elemento acionador e do elemento promovido no DOM. Especialmente útil se o elemento do acionador estiver fazendo atualizações de atributos, por exemplo. Isso também tem um benefício adicional para a acessibilidade, agora que os elementos estão colocalizados.
Para ilustrar a camada superior em comparação com a z-index alta, considere esta demonstração.
Nesta demonstração, você pode abrir um pop-up do SweetAlert e também uma camada superior <dialog>. Abra o <dialog> e tente abrir o pop-up do SweetAlert. Observe que ele aparece abaixo do elemento da camada superior. E a raiz do pop-up SweetAlert usa 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
E isso nos leva ao suporte do 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 empilhando na camada superior ou até mesmo 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 em fase de pré-lançamento no Chrome Canary versão 105.
Pronto!
Uma breve introdução à camada superior. Agora é possível dizer "tchau!" para frases como:
.popup-container {
z-index: 10000;
}
O que você colocaria na camada superior? Você já testou o dialog? Ou já conferiu a API OpenUI Popover? Conte para nós.