Stop `z-index: 999999` !!
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

DevTools z-index

Build Status Greenkeeper badge


Stop z-index: 999999 !!

This adds "z-index" sub-pane of Elements panel for Chrome, "z-index" panel for Firefox.


Download from Chrome Web Store Download Firefox add-ons

What for?

You may be shocked by finding how large numbers are used in your page. Unconsidered large numbers would be killed by another larger numbers, and those larger numbers also killed by much-larger numbers like war. That sucks.

This extension offers a table that helps reduce those numbers. You can keep your CSS code clean, maintainable and peaceful.

No more z-index: 2147483647 !!

Chrome extension

z-index pane in Elements panel, where you can find all elements with z-index

Click a selector to inspect the element in Elements panel

Firefox add-on

z-index panel where you can find all elements with z-index

Since Firefox doesn't allow us to add nice Inspector (Elements) panel's pane, I added it as a panel.

Code snippet

Basic idea was in Twitter and Gist.

((document, limit) => {
  const data = Array.from(document.querySelectorAll('*'))
    .map((el) => ({zIndex: Number(getComputedStyle(el).zIndex), element: el }))
    .filter(({ zIndex }) => !isNaN(zIndex))
    .sort((r1, r2) => r2.zIndex - r1.zIndex)
    .slice(0, limit);
})(document, 50);

Future feature

Honestly, I'm not planning to update since I felt satisfied tough, it would be fun to add following features.

  • Fix: it finds a wrong element when some elements have the same selector (because it searches only by selector)
  • Show useful information like stacking context
  • Show something if an element's z-index is specified by style attribute
  • Ability to update z-index for preview, like DevTools Style sub-pane
  • Set better icon somehow


  • MIT