v1.0.0 · Chrome · MV3 · 24 KB

StackLens

CSS stacking context debugger. Visualize z-index layers, detect conflicts, and fix stacking issues with one click.

See Your Stacking Contexts

html (root) z: auto
.navbar z: 100
.modal-overlay z: 1000
.tooltip z: 999
.dropdown z: 100
Conflict: .navbar and .dropdown both use z-index: 100

One-Click Scan

Click the icon to instantly scan the page and discover every stacking context. No setup, no configuration needed.

FREE

Hierarchical Tree View

See all stacking contexts in a clean tree view with z-index values. Understand parent-child relationships at a glance.

FREE

Color-Coded Z-Index Ranges

Low, medium, high, and extreme z-index values are color-coded so you can spot outliers and patterns instantly.

FREE

Page Overlay Highlighting

Hover over any item in the tree and see it highlighted directly on the page. Click to scroll it into view.

FREE

Element Count Badge

Extension badge shows the total number of stacking contexts on the current page. Spot complex pages at a glance.

FREE

3D Layer Visualization

See your stacking contexts as 3D layers, like an exploded view of your page. Rotate and zoom to understand depth.

PRO

Z-Index Conflict Detection

Automatically finds elements with the same z-index competing in the same stacking context. No more guessing.

PRO

Fix Suggestions

Get actionable suggestions to resolve stacking conflicts. Copy the fix and paste it into your CSS.

PRO

Export Report (JSON / PNG)

Export the full stacking context tree as JSON for tooling, or as a PNG screenshot for bug reports and documentation.

PRO

Unlimited Scans

Free tier gives you generous daily scans. Pro removes all limits so you can debug complex apps without interruption.

PRO