Top layer
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:
-
Fullscreen elements, i.e. elements that have been caused to display in fullscreen mode by a successful
Element.requestFullscreen()
call. -
<dialog >
elements displayed as a modal via a successfulHTMLDialogElement.showModal()
call. -
Popover elements shown via a successful
HTMLElement.showPopover()
call.
Some browsers, such as Chrome, show elements placed in the top layer inside a special DOM tree entry. For example:
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
- The stacking context
- Fullscreen API
-
<dialog >
element,HTMLDialogElement
interface - Popover API
-
:fullscreen
pseudo-class