Couche supérieure (Top layer)

La couche supérieure (top layer en anglais) est une couche spécifique qui s'étend sur toute la largeur et la hauteur de la zone d'affichage (viewport en anglais) et qui se place au-dessus de toutes les autres couches affichées dans un document web. Elle est créée par le navigateur pour contenir les éléments devant apparaître au-dessus de tout le contenu de la page.

Les éléments placés dans la couche supérieure génèrent un nouveau contexte d'empilement, tout comme leurs pseudo-éléments ::backdrop associés.

Les éléments qui apparaissent dans la couche supérieure incluent :

• Les éléments en plein écran, c'est-à-dire les éléments affichés en mode plein écran suite à un appel réussi à Element.requestFullscreen().
• Les éléments <dialog> affichés comme modaux via un appel réussi à HTMLDialogElement.showModal().
• Les éléments popover affichés via un appel réussi à HTMLElement.showPopover().

Certains navigateurs, comme Chrome, affichent les éléments placés dans la couche supérieure dans une entrée spéciale de l'arbre DOM. Par exemple :

Notez que la couche supérieure est un concept interne au navigateur et ne peut pas être manipulée directement depuis le code. Vous pouvez cibler les éléments placés dans la couche supérieure avec CSS et JavaScript, mais vous ne pouvez pas cibler la couche supérieure elle-même.