z-context
A Chrome DevTools Extension that displays stacking contexts and z-index values in the elements panel
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
Works, but as other reviews stated it requires a full browser restart otherwise it just shows whitespace.
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.
Doesn't work in: Chrome 120.0.6099.217 Chrome 121.0.6167.47 Chrome 122.0.6238.0
doesn't work in the Chrome v120
does work unfortunately!
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.
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.
Funktioniert nicht.
Not working
Not working
Not working
Not working
Worked wonders, super helpful for solving a problem related to stacking context.
Worked wonders, super helpful for solving a problem related to stacking context.
Not working in chrome 2021
Not working in chrome 2021
Doesn't work on latest chrome. Reloading the browser or reinstalling the extension doesn't help - the tab is always empty
Doesn't work on latest chrome. Reloading the browser or reinstalling the extension doesn't help - the tab is always empty
Not work in 2021
Not work in 2021
If i set position value fixed or sticky and z-index: auto > it return false > you need to fix this bug
If i set position value fixed or sticky and z-index: auto > it return false > you need to fix this bug
This extension helped me to understand and fix a problem with layers which I couldn't solve otherwise.
This extension helped me to understand and fix a problem with layers which I couldn't solve otherwise.
did not work, does not appear in dev tools even after restart, a how to would be nice
did not work, does not appear in dev tools even after restart, a how to would be nice
Thanks. Was going crazy trying to figure out why a stacking context was getting created and this one told me exactly why.
Thanks. Was going crazy trying to figure out why a stacking context was getting created and this one told me exactly why.
Crazy useful. Can't dev Webapps without it anymore
Crazy useful. Can't dev Webapps without it anymore
could not figure out how to use if :(
could not figure out how to use if :(
Super handy.
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.
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.
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).
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).
You have to completely restart Chrome for this extension to start working. Took me a while to figure that out.
You have to completely restart Chrome for this extension to start working. Took me a while to figure that out.
Great to understand/debug your z-indexes and stacking contexts. Should def be in DevTools natively :) Thanks heaps.
Great to understand/debug your z-indexes and stacking contexts. Should def be in DevTools natively :) Thanks heaps.
Could not see the tab in dev tools , even after restarting and refresh . A good how to is helpful
Could not see the tab in dev tools , even after restarting and refresh . A good how to is helpful
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.
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.
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"
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"
Perfect to find out which stacking context an element belongs to.
Perfect to find out which stacking context an element belongs to.
awesome extension. so useful for debugging unexpected z-index behaviour.
