z-context

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

z-context: Stacking Contexts & z-Index Viewer

"z-context" is a Chrome DevTools extension designed to help developers understand stacking contexts and z-index values in web pages. It identifies if an element creates a stacking context, reveals its parent context, and displays the associated z-index value. This tool is essential for correctly managing stacking contexts and avoiding arbitrary z-index assignments, ultimately leading to better web design and layout management.

Download

Extension stats

By: gwwar

Users: 7,000+

Rating: 3.47

(43)

Version: 3.0.0 (Last updated: 2024-11-28)

Creation date: 2018-02-17

Risk impact: Moderate risk impact

Risk likelihood:

Very low risk likelihood

Manifest version: 3

Size: 31.21K

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

Ranking

# 11,406 ▲ 22

Other rankings

#788 in Developer Tools

#16 in reason keyword 10

#91 in pull keyword 65

#182 in rule keyword 34

#208 in position keyword 27 ▲

Upgrade to see more rankings

Other platforms

Not available on Android

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

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

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

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

Helpful for understanding and solving stacking context issues.
Works after a browser restart.
Extremely useful for web development.

Cons

Doesn't work in multiple versions of Chrome without a restart.
Often shows an empty panel or fails to load.
Network request errors unrelated to functionality.

Most mentioned

Requires browser restart to function properly.
Empty panel upon first installation.
Not working in recent versions of Chrome.

User reviews

Works, but as other reviews stated it requires a full browser restart otherwise it just shows whitespace.

Noah Yamamoto, 2024-12-17

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.