z-context

Download / Install How to install an extension

CRX id

jigamimbjojkdgnlldajknogfgncplbh

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 -------- 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

(2023-03-04) 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.
(2023-01-05) Rollmops94: Funktioniert nicht.
(2022-08-19) Lumbardh Elshani: Not working
(2022-05-12) Patrick Baumann: Not working
(2021-11-02) Sebastian Vittersø: Worked wonders, super helpful for solving a problem related to stacking context.
(2021-08-19) Artur Mueller Romanov: Not working in chrome 2021
(2021-08-04) Sergey Grishanin: Doesn't work on latest chrome. Reloading the browser or reinstalling the extension doesn't help - the tab is always empty
(2021-08-03) Vermus: Not work in 2021
(2021-03-05) 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
(2021-01-28) Martin Sauter: This extension helped me to understand and fix a problem with layers which I couldn't solve otherwise.
(2020-02-13) Ben Manson: did not work, does not appear in dev tools even after restart, a how to would be nice
(2019-10-30) David Rickard: Thanks. Was going crazy trying to figure out why a stacking context was getting created and this one told me exactly why.
(2019-06-24) Pedro Torchio: Crazy useful. Can't dev Webapps without it anymore
(2019-06-05) T N: could not figure out how to use if :(
(2019-05-27) Drazen Bjelovuk: Super handy.
(2019-02-10) 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.
(2018-12-05) 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).
(2018-09-11) Josh Wright: You have to completely restart Chrome for this extension to start working. Took me a while to figure that out.
(2018-09-05) Ben McCallum: Great to understand/debug your z-indexes and stacking contexts. Should def be in DevTools natively :) Thanks heaps.
(2018-08-23) vamshi krishna: Could not see the tab in dev tools , even after restarting and refresh . A good how to is helpful
(2018-07-31) 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.
(2017-12-04) 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"
(2017-09-27) Tristan Scaglia: Perfect to find out which stacking context an element belongs to.
(2017-09-15) Nils Lundquist: awesome extension. so useful for debugging unexpected z-index behaviour.
(2017-06-08) Dmitrii: Awesome: very useful for checking an element z-index
(2017-05-22) Max Dudzinski: Awesome extension, has helped me a lot when trying to level stacking contexts in order to display custom overlays. Light and straight to the point, with good selection of information that it makes available at a glance. Like Aviral said really surprising that its not part of CDT
(2017-01-17) Aviral Dasgupta: Works well for what it does. Surprising that this isn't built into CDT already.
(2016-08-02) James Williams: Really handy! But why on earth does it need permissions to *change* data on websites I visit? Surely *reading* that data is enough for the current functionality?

Statistics

Installs

7,000

Links

Extension in store

Developer e-mail