Z-index Find the stacking context of an element

Question

How do I find the stacking context of an element? Or, how do I find that element's ancestor element which is controlling the z-index of the descendant?

I have a very complex page with nested tables, divs. And an absolutely positioned box with a high z-index is hidden.

I have fixed these problems before by methodically working my way through the element's ancestors until I find where to add a z-index value and position value to create a new stacking context.

But I can't seem to solve it that way for this problem.

Is there a tool, (either in a browser's developer tools, or in Javascript) where I can give it element A, and it returns something like :

"element A is part of stacking context beginning at element B, which is part of the stacking context beginning at element C, which is part of the root stacking context of the page"

Help me guys, you're my only hope.

Answer 1

McNulty, the tool you are looking for is a Chrome extension called "z-context" by Github user gwwar. I am working on a very complicated grid component which has lots of nested divs in the DOM structure and I needed something that would help.

I have used the extension and can confirm it works as of the date of this posting. Make sure to open a new browser session after you install it.

https://github.com/gwwar/z-context