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)

0.01

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

# 12,198 ▲ 91

Other rankings

#793 in Developer Tools ▲ 3

#16 in reason keyword 3

#96 in pull keyword 8 ▼ 4

#114 in position keyword 18 ▲ 5

#171 in rule keyword 9 ▲ 13

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

Helps to understand and fix stacking context issues
Super helpful for solving problems related to z-index and layers
Considered essential for developing web applications

Cons

Does not work in multiple versions of Chrome
Extension shows an empty panel after installation until the browser is restarted
Does not appear in developer tools even after restarting the browser

Most mentioned

Not working
Empty panel after installation
Helpful for understanding stacking context

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.