Sometimes you need to know what z-Index to set on a positioned element in order for it to really be on top of everything. If you own the whole page, that’s easy to manage, but when working on a page shared with other scripts that you don’t control, you need a way to tell what are elements have z-Index set.
You can run this in the console to get a list of all elements that have z-Index set and the corresponding elements:
document.querySelectorAll('*').forEach(e=>{const s = getComputedStyle(e);if (s.zIndex !== 'auto') console.log(s.zIndex, e)})
Or you can define a function that you can call dynamically when you need to get the current largest z-Index:
function largestZIndex() {
let z = 0;
document.querySelectorAll(‘*’).forEach((e) => {
const s = getComputedStyle(e);
if (s.zIndex !== ‘auto’ && +s.zIndex > z) {
z = +s.zIndex;
}
});
return z;
}
