DevTools z-index

Print all elements with z-index sorted by that number.

What is DevTools z-index?

DevTools z-index is a Chrome extension designed to ease the process of managing and understanding your webpage layering. With this tool, you gain a pane in your DevTools' Elements panel showing all elements sorted by their z-index value. It offers an easy way to visualize z-index stacking order, which aids in reducing the instances of z-index high values like 999999. A must-have solution for developers aiming for cleaner, more efficient CSS styling.

Download

Stats

By: ginpei

View on Chrome Web Store

Users: 9,000+

Rating: 3.54 (13)

Version: 1.1.0 (Last updated: 2022-07-06)

Creation date: 2019-09-04

Risk impact: Low risk impact

Risk likelihood: Very low risk likelihood

Manifest version: 2

Size: 21.32K

Email: gi*****@ginpei.dev

Stats date:

Chrome-Stats Rank

# 10852 ▼ 30

Other rankings

#659 in Developer Tools ▲ 1

Other platforms

Not available on Firefox

Not available on Edge

Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.

Summary

Analyze keywords

Adds "z-index" pane to DevTools' Elements panel. It shows ranking of elements sorted by z-index value. This would help you to reduce z-index numbers.

Stop z-index: 999999 !!

User reviews

It is working, the location: https://github.com/ginpei/devtools-z-index/issues/88

Béci Roboz, 2023-02-11

Didn't work.

Jia Shan, 2022-07-25

Make sure you fully restart chrome after adding or the pane will not be there. Unfortunately this plugin does not handle parents, so it doesn't actually reflect how the browser will render z-order.