Stacking

These sections appear in the Element tab only when they have something to say about the selected element. An element with nothing to warn about, no shadow and no gradient shows none of them.

The Stacking section explains why an element sits above or below another.

• The computed z-index, and a note when it has no effect, for example on a static element.
• Whether the element starts a stacking context, and why: position with z-index, fixed or sticky, opacity below 1, transform, filter, isolation, contain, will-change and the rest.
• The ancestors that start one, nearest first, under Stacks within, then the page itself, with why the root context exists. Press an ancestor to select it.
• Paints with: what competes with the element inside its nearest context, in the order the browser paints it, bottom first: negative z-index, then auto and 0 in page order, then positive. The element (or the ancestor that stands for it) is marked; press a row to select it. An element that is not positioned paints with the page's flow, under all of them.
• Newer causes count too: view-transition-name, and the top layer (a modal dialog, an open popover, fullscreen), which paints over everything whatever any z-index says.

A z-index of 9999 inside a fixed modal counts only inside the modal, and this is where you see it.