Highlight z-index to find layering bugs

zindex.js

// Drop this in the console and highlight all the elements with a defined z-index. 
// Helpful for debugging z-index issues. 

function highlightElementsWithZIndex() {
  const allElements = document.querySelectorAll('*');

  allElements.forEach(element => {
    const zIndex = window.getComputedStyle(element).zIndex;

    // Check if z-index is explicitly set and is a valid number (not "auto")
    if (zIndex !== 'auto' && !isNaN(parseInt(zIndex))) {
      element.style.border = '2px solid red';
      element.style.boxShadow = '0 0 5px rgba(255, 0, 0, 0.5)';

      console.log(`Element:`, element, `Z-index:`, zIndex);
    }
  });
}

highlightElementsWithZIndex();