Sometimes it is hard to inspect elements that are behind other elements. In such cases you currently have to delete the ones that are covering them or remove them from the stack using CSS like display: none;, visibility: hidden;, or pointer-events: none;.

For those cases there should be a way to inspect elements farther down the paint order.

Implementation-wise this would cycle through the elements returned by DocumentOrShadowRoot.elementsFromPoint().

UI-wise there may be different solutions. One could be a keyboard shortcut allowing to toggle through the elements under the cursor while inspecting like the Down/Up keys.

Important to note is that this feature should not change the way how inspecting the top-layer element works right now.

Here are some examples in which it should be possible to inspect the seagreen element(s):

Child element overlapping parent element:
data:text/html,<div style="width:200px;background-color:seagreen;"><div style="height:200px;"></div></div>

Overlapping grid items:
data:text/html,<div style="width:200px;height:200px;display:grid;grid-template:auto/auto;"><div style="grid-area:1/1/1/1;background-color:seagreen;"></div><div style="grid-area:1/1/1/1;"></div></div>

Absolutely positioned element overlapping sibling and parent element:
data:text/html,<div style="width:200px;height:200px;position:relative;background-color:seagreen;"><div style="width:100%25;height:100%25;background-color:seagreen;"></div><div style="position:absolute;top:0;left:0;width:100%25;height:100%25;"></div></div>

Sebastian