How To Get Effective Z-Indexes on All Elements On A Page


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;
}