Top layer

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.

Elements placed in the top layer generate a new stacking context, as do their corresponding ::backdrop pseudo-elements.

Elements that will appear in the top layer include:

Some browsers, such as Chrome, show elements placed in the top layer inside a special DOM tree entry. For example:

An element in the top layer, as shown in the chrome devtools

Note that the top layer is an internal browser concept and cannot be directly manipulated from code. You can target elements placed in the top layer using CSS and JavaScript, but you cannot target the top layer itself.

See also