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.

Download

Stats

By: gwwar

View on Chrome Web Store

Users: 8,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

Email: ke*****@gmail.com

Stats date:

Chrome-Stats Rank

# 11318 ▼ 92

Other rankings

#669 in Developer Tools ▼ 1 #21 in reason keyword 3 #88 in pull keyword 13 ▼ 5 #92 in position keyword 22 #175 in value keyword 7

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.

Summary

Analyze keywords

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

User reviews summary

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

Michael Rosa, 2024-01-10

doesn't work in the Chrome v120

Andrei Kurhan, 2024-01-02

does work unfortunately!

Nic Newdigate, 2023-11-24

View all user reviews

Safety

Risk impact

z-context may not be safe to use and it requires some risky permissions. Exercise caution when installing this extension. Review carefully before installing.