The top layer is a specific layer that spans the entire width and height of the viewport and sits on top of all other layers displayed in a web document. It is created by the browser to contain elements that should appear on top of all other content on the page.
The primary use-case currently is the dialog element, with the popover element on its way.
Elements placed in the top layer generate a new stacking context, as do their corresponding ::backdrop pseudo-elements. Elements are stacked in the order they appear in the set (last one in is on top).
Note that z-index has no effect in the top layer, and you cannot position something on top of the top-layer using a high value.
https://developer.mozilla.org/en-US/docs/Glossary/Top_layer https://developer.chrome.com/blog/what-is-the-top-layer