z-context icon

z-context

Extension Actions

CRX ID
jigamimbjojkdgnlldajknogfgncplbh
Status
  • Extension status: Featured
  • Live on Store
Description from extension meta

A Chrome DevTools Extension that displays stacking contexts and z-index values in the elements panel

Image from store
z-context
Description from store

Why use it? Browsers support a hierarchy of stacking contexts, rather than a single global one. This means that z-index values are often used incorrectly, and arbitrarily high values get set.

By Using Z-Context, you'll know:

- If the current element creates a stacking context, and why
- What its parent stacking context is
- The z-index value
--------
v3.0.0 - Update to manifest v3 and update stacking context rules https://github.com/gwwar/z-context/pull/29
v2.1.0 - Includes http protocol to facilitate development use cases https://github.com/gwwar/z-context/pull/23
v2.0.0 - Adds support for inspecting iframes https://github.com/gwwar/z-context/pull/21 https://github.com/gwwar/z-context/pull/22
v1.1.0 - Adds z-index stacking context rules as of 2021. Adds fixes for position sticky and shadow dom, props to roperzh and edenilan! See pulls 10, 17 and 18 at https://github.com/gwwar/z-context.
v1.0.4 - fixes will-change case. a stacking context is created for opacity/transform but not other values https://github.com/gwwar/z-context/pull/9
v1.0.3 - fixes display reason for flex-items https://github.com/gwwar/z-context/pull/4
v1.0.2 - adds new z-index rules, fixes a bug when inspecting a shadow dom elements. https://github.com/gwwar/z-context/pull/3
v1.0.1 - fix reason message for non-static positions, props to giuseppeg. https://github.com/gwwar/z-context/pull/1

Latest reviews

Noah Yamamoto
Works, but as other reviews stated it requires a full browser restart otherwise it just shows whitespace.
Auri
Getting an error about a failed network request in the latest version of Chrome. Definitely a red-flag as there's nothing here that requires any network operations. Uninstalling.
Michael Rosa
Doesn't work in: Chrome 120.0.6099.217 Chrome 121.0.6167.47 Chrome 122.0.6238.0
Andrei Kurhan
doesn't work in the Chrome v120
Nic Newdigate
does work unfortunately!
Zachary Wiles
I have found that z-context v2.1.0 doesn't work (empty panel) upon first install until the browser is restarted. Temp fix: restart chrome browser after install. FAQ: Where does the Z-index panel appear? On the panel row with the Styles tab, at the very end, probably need to click the disclosure >> You can then rearrange by dragging the tab left.
Zachary Wiles
I have found that z-context v2.1.0 doesn't work (empty panel) upon first install until the browser is restarted. Temp fix: restart chrome browser after install. FAQ: Where does the Z-index panel appear? On the panel row with the Styles tab, at the very end, probably need to click the disclosure >> You can then rearrange by dragging the tab left.
Rollmops94
Funktioniert nicht.
Lumbardh Elshani
Not working
Lumbardh Elshani
Not working
Patrick Baumann
Not working
Patrick Baumann
Not working
Sebastian Vittersø
Worked wonders, super helpful for solving a problem related to stacking context.
Sebastian Vittersø
Worked wonders, super helpful for solving a problem related to stacking context.
Artur Mueller Romanov
Not working in chrome 2021
Artur Mueller Romanov
Not working in chrome 2021
Sergei Grishanin
Doesn't work on latest chrome. Reloading the browser or reinstalling the extension doesn't help - the tab is always empty
Sergei Grishanin
Doesn't work on latest chrome. Reloading the browser or reinstalling the extension doesn't help - the tab is always empty
Vermus
Not work in 2021
Vermus
Not work in 2021
Mạnh Đàm Văn
If i set position value fixed or sticky and z-index: auto > it return false > you need to fix this bug
Mạnh Đàm Văn
If i set position value fixed or sticky and z-index: auto > it return false > you need to fix this bug
Martin Sauter
This extension helped me to understand and fix a problem with layers which I couldn't solve otherwise.
Martin Sauter
This extension helped me to understand and fix a problem with layers which I couldn't solve otherwise.
Ben Manson
did not work, does not appear in dev tools even after restart, a how to would be nice
Ben Manson
did not work, does not appear in dev tools even after restart, a how to would be nice
David Rickard
Thanks. Was going crazy trying to figure out why a stacking context was getting created and this one told me exactly why.
David Rickard
Thanks. Was going crazy trying to figure out why a stacking context was getting created and this one told me exactly why.
Pedro Torchio
Crazy useful. Can't dev Webapps without it anymore
Pedro Torchio
Crazy useful. Can't dev Webapps without it anymore
T N
could not figure out how to use if :(
T N
could not figure out how to use if :(
Drazen Bjelovuk
Super handy.
wesh cousin
I guess this extension might be useful, but it doesn't show every stacking contexts. In my case it didn't show that positioning an element to fixed or sticky creates a stacking context, even without any opacity or z-index rule. as it can be seen here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context and as it definitely applies.
wesh cousin
I guess this extension might be useful, but it doesn't show every stacking contexts. In my case it didn't show that positioning an element to fixed or sticky creates a stacking context, even without any opacity or z-index rule. as it can be seen here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context and as it definitely applies.
Ivan Fedulov
Occurred to be very helpful when I stuck with debugging z-index issue in markup. Would be very nice if displayed properties *current* and *parentStackingContext* will point to real DOM nodes in Elements tab, not just strings with class names (which sometimes are absent when element has inline styles).
Ivan Fedulov
Occurred to be very helpful when I stuck with debugging z-index issue in markup. Would be very nice if displayed properties *current* and *parentStackingContext* will point to real DOM nodes in Elements tab, not just strings with class names (which sometimes are absent when element has inline styles).
Josh Wright
You have to completely restart Chrome for this extension to start working. Took me a while to figure that out.
Josh Wright
You have to completely restart Chrome for this extension to start working. Took me a while to figure that out.
Ben McCallum
Great to understand/debug your z-indexes and stacking contexts. Should def be in DevTools natively :) Thanks heaps.
Ben McCallum
Great to understand/debug your z-indexes and stacking contexts. Should def be in DevTools natively :) Thanks heaps.
vamshi krishna
Could not see the tab in dev tools , even after restarting and refresh . A good how to is helpful
vamshi krishna
Could not see the tab in dev tools , even after restarting and refresh . A good how to is helpful
Ryan Karumanchery
Insanely helpful. I've spent hours trying to figure out the stacking context of my elements, while this extension helped solve my problem in a few minutes.
Ryan Karumanchery
Insanely helpful. I've spent hours trying to figure out the stacking context of my elements, while this extension helped solve my problem in a few minutes.
Dmitri Pisarev
This extension is very helpful. But I wasted a ton of time because of the bug in it. It reports new stacking context for any value of "will-change", even smth like "will-change: left", which obviously doesn't create a stacking context. According to the spec: "Element with a will-change value specifying any property that would create a stacking context on non-initial value"
Dmitri Pisarev
This extension is very helpful. But I wasted a ton of time because of the bug in it. It reports new stacking context for any value of "will-change", even smth like "will-change: left", which obviously doesn't create a stacking context. According to the spec: "Element with a will-change value specifying any property that would create a stacking context on non-initial value"
Tristan Scaglia
Perfect to find out which stacking context an element belongs to.
Tristan Scaglia
Perfect to find out which stacking context an element belongs to.
Nils Lundquist
awesome extension. so useful for debugging unexpected z-index behaviour.