Z Index Inspector

WHAT IT DOES

Z Index Inspector is a developer tool that scans the current webpage and builds a complete inventory of every positioned element (elements with position: relative, absolute, fixed, or sticky) and their z-index values. It displays each element with its z-index, position type, HTML tag, and a unique CSS selector. You can sort the list by z-index, tag, position type, or selector in ascending or descending order. The tool also identifies implicit z-index values (auto) and marks which elements create stacking contexts. Hovering over any item in the list highlights the corresponding element on the page with a yellow outline, making it easy to locate elements in complex layouts. You can copy any element's selector or z-index value to your clipboard with a single click.

WHERE IT RUNS

This script works on any website — every HTTP and HTTPS page. It runs inside the BotGentz extension panel overlay, independent of the page's own scripts. It does not require the page to reload or modify its content in any way. It works with all modern browsers and frameworks including React, Vue, and Angular.

HOW TO USE

Install the script through the BotGentz extension marketplace. Once installed, open the BotGentz panel on any webpage and select Z Index Inspector from the list of installed scripts. The panel will automatically scan the page and display all positioned elements. Use the sort dropdowns to reorder the list by z-index, tag, position type, or selector. Adjust the "Max" input to control how many items are displayed (up to 1000). Hover over any row to highlight that element on the page — it will be outlined in yellow and scrolled into view. Click the selector text to copy the element's CSS selector to your clipboard. Click the "Z" button to copy the z-index value. Click the eye icon to highlight the element manually. The "Clear Highlight" button removes any active highlight. The "Scan" button rescans the page, which is useful for single-page applications that dynamically create elements.

ONE TECHNICAL SECTION — The actual mechanism

Z Index Inspector works by traversing the entire DOM and using getComputedStyle() to read the computed styles for every element on the page. It checks for position values other than "static" and then reads the z-index property. For elements with z-index: auto, it still includes them but marks them as "implicit" because they still participate in stacking context creation under certain conditions (e.g., positioned elements with auto z-index still create a stacking context). The tool uses the nth-of-type pseudo-class and class name fallbacks to generate unique, stable CSS selectors for each element without relying on IDs that may be dynamic. The highlight mechanism applies a CSS outline directly to the element using a dedicated class, which does not affect the element's layout or position — making it safe to use on any page without causing reflows.

THE PANEL

The script runs inside the BotGentz extension panel, which is fully draggable and resizable. You can click and drag the panel header to reposition it anywhere on the screen. The panel snaps to the edges of the browser window for easy positioning. Click the collapse button (chevron) to minimize the panel to a small icon, or press the Escape key to close the panel entirely. The panel remembers its position and size between uses on a per-site basis. When the panel is closed, you can reopen it from the BotGentz toolbar icon.

PLEASE NOTE

This script requires the free BotGentz extension to run. It does not work as a standalone userscript without the extension. Websites change frequently — a script that works perfectly today may need updating if a site changes its structure or uses shadow DOM. The script reads only the current page's DOM; it does not access other tabs, bookmarks, history, or downloads. All data is processed locally in your browser and is never transmitted anywhere. The selector generation uses a heuristic that works for most sites but may not be unique for highly dynamic or generated class names. For complex sites, the selector may be longer or less readable, but it will still uniquely identify the element. Performance may vary on pages with thousands of elements; the display limit (default 100) helps keep the list responsive. You can adjust this limit up to 1000 items if needed.