I have two carousels which one of them is set to absolute and a toggle button above them which switches them out when I switch to the second one.

I can't click it, I feel the error is from z-index but I didn't set any z-index on any of the elements, is there a plugin to view their z-index?

I have two carousels which one of them is set to absolute and a toggle button above them which switches them out when I switch to the second one.

I can't click it, I feel the error is from z-index but I didn't set any z-index on any of the elements, is there a plugin to view their z-index?

• javascript
• html
• css
• css-position
• z-index

• You should be able to use javascript to get the elements z-index like so; console.log(document.getElementById("element").style.zIndex); – Bobby Mannino Commented Apr 6, 2021 at 12:50
• Please show us your code. The button could be overlayed by one of those carousels or some other element. – lupz Commented Apr 6, 2021 at 12:54
• You can try this: chrome.google./webstore/detail/devtools-z-index/… – m4n0 Commented Apr 6, 2021 at 12:55
• Notice that while all answers so far show you how to find whether an element has a z-index applied, none of the approaches will tell you which stacking context an element belongs to – Bergi Commented Apr 6, 2021 at 13:09

3 Answers 3

If you are using chrome, you can check it in developer tools.

Right click on the element you want to check and inspect element. Switch to elements tab in developer tool then click on puted tab. It shows you all puted styles in alphabetical order.

Maybe I missed the point of the question, but simply using 'inspect' on Firefox or Chrome will allow you to see all styling properties on all element.

To get there:

1. Right click the element you want
2. Select 'inspect element'

as you can see the header of this very page has a z-index value of 5050

You can get the element, then extract the styles. Then you can get the value of style property by using camelcase for the css attribute name.

const style = getComputedStyle((document.getElementById("element"));

const zIndex = style.zIndex;

console.log(zIndex);