Skip to content We're live on Product Hunt today Upvote
install

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

diagnostic · one of 36 free, no counter

Top layer

Why is this dialog above everything, whatever z-index I write?

The top layer is not a big z-index - it is a separate list the browser paints after the document, which is why no stacking context and no z-index: 999999 ever gets above a modal dialog. This reads that list as the list it is: which dialogs, popovers and fullscreen elements are in it right now, in what order, what each popover is anchored to, and what a modal has made inert underneath itself.

Reach it Press ⌘ + K on any tab and type top layer. Ctrl + K on Windows and Linux

Who paints above every z-index, and what anchors it there
reads open dialogs, popovers and the fullscreen element
z-index not consulted - the top layer sits above all of it
anchors named where a popover declares one
inert what a modal dialog is holding inert is listed
writes nothing - nothing is opened or closed
sends nothing
plan free
Add   LoupeKit - opens the list of browsers it can be installed in

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

in the panel · free, no counter

section#about

What this actually is

A modal that something refuses to appear above, a popover that dismisses when you expected it to stay, or a page that stops responding to clicks and the answer is an invisible open dialog holding everything else inert. Open what you are debugging first - the reading is of the top layer as it stands.

section#asked

Asked about this diagnostic

Why does my z-index: 999999 element still sit under the dialog?

Because the top layer is not part of the stacking order at all - it is a separate list painted after the whole document, and showModal() and showPopover() are the only ways in. No value you can write in CSS competes with it; the fix is joining the top layer, not outbidding it.

What is the difference between dialog.show() and showModal()?

show() displays the dialog in the normal stacking order - no top layer, no backdrop, nothing inert. showModal() promotes it to the top layer and makes the rest of the document inert, which is also the answer to why the page behind it stopped taking clicks.

Why did my popover close the moment I clicked elsewhere?

popover="auto" light-dismisses on any interaction outside it, by design; popover="manual" stays until closed. The reading names each popover's type, which is usually the whole diagnosis of a menu that will not stay open.

The reading is empty - is that a failure?

No, it is the answer: nothing is in the top layer right now. Dialogs opened with show(), overlays built out of positioned divs and anything else living in the stacking order belong to the Z-index reading instead, which is the neighbouring tool.

how to use top layer

  1. Open Top layer while the dialog or the popover is open.
  2. Read the list in paint order. The top layer sits above the document whatever any z-index says.
  3. Check what a modal dialog is holding inert - that is usually why clicks stopped working.
  4. A popover names its anchor wherever it declares one.

written about at length

Add   LoupeKit - opens the list of browsers it can be installed in

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

70 of these · no host permissions · three free audits