z-context

A Chrome DevTools Extension that displays stacking contexts and z-index values in the elements panel
What is z-context?
"Z-Context" is a DevTools extension for Chrome which elucidates the hierarchy of stacking contexts and z-index values in the elements panel. With this tool, understanding incorrect and arbitrarily high set z-index values becomes straightforward. It also provides context-specific details like the reasons for creating a stacking context, its parent context and respective z-index value. Get the edge in web development with optimized debugging and inspection of iframes and shadow DOM elements, including the flex-items and non-static positions.

Extension stats

By: gwwar
Users: 7,000+
Rating: 3.51 (41)
Version: 2.1.0 (Last updated: 2022-01-27)
Creation date: 2018-02-17
Risk impact: Moderate risk impact
Risk likelihood: Very low risk likelihood
Manifest version: 2
Size: 29.16K

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.

Extension summary

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

User reviews

These summaries are automatically generated weekly using AI based on recent user reviews. Chrome Web Store does not verify user reviews, so some user reviews may be inaccurate, spammy, or outdated.
Pros
  • super helpful for solving problems related to stacking context
  • helpful for understanding and fixing issues with layers
  • essential for debugging z-index issues in markup
  • useful for checking an element's z-index and its stacking context
Cons
  • does not work in several versions of Chrome
  • requires browser restart after installation to work
  • incomplete detection of stacking contexts (e.g., fixed or sticky positioning)
  • UI/UX issues including invisibility in dev tools and lack of guidance on usage
Most mentioned
  • Not working or empty panel reported by multiple users
  • Requires a Chrome restart for the extension to work
  • Helpful in understanding and debugging z-index/stacking context issues
  • Lack of documentation or 'how-to' causing difficulties in usage
Recent reviews
Doesn't work in: Chrome 120.0.6099.217 Chrome 121.0.6167.47 Chrome 122.0.6238.0
by Michael Rosa, 2024-01-10

doesn't work in the Chrome v120
by Andrei Kurhan, 2024-01-02

does work unfortunately!
by Nic Newdigate, 2023-11-24
View all user reviews

Extension safety

Risk impact

z-context requires a few sensitive permissions. Exercise caution before installing.

Risk likelihood

z-context has earned a good reputation and can be trusted.

Upgrade to see risk analysis details

Similar extensions

Here are some Chrome extensions that are similar to z-context: