Z-Context is a Chrome DevTools Extension that displays stacking contexts and z-index values in the elements panel.
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. To learn more read Mozilla's guide on z-indexes or the w3c spec.
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
Visit https://chrome.google.com/webstore/detail/jigamimbjojkdgnlldajknogfgncplbh and add the extension to Chrome.