Показать все z-index на странице

Иногда случается, что z-index элемента больше чем нужно и он настырно лезет наверх. В ходе разработки, не задумываешься, какие элементы перекроет твой z-index, не знаешь какой z-index поставили коллеги. Чтобы быстро посмотреть где какой z-index используется, я написал такой простенький скрипт. Его можно вставить в консоль и наглядно увидеться z-index элементов.

// Найти все элементы на странице

const allElements = document.querySelectorAll('*');

// Пройти по каждому элементу и добавить маркер с z-index

allElements.forEach((element, index) => {

const zIndex = getComputedStyle(element).zIndex;

// Создать элемент для отображения z-index

const zIndexMarker = document.createElement('div');

zIndexMarker.textContent = `z-index: ${zIndex}`;

zIndexMarker.style.position = 'absolute';

zIndexMarker.style.top = '0';

zIndexMarker.style.left = '0';

zIndexMarker.style.backgroundColor = 'red'; // Цвет фона маркера

zIndexMarker.style.color = 'white'; // Цвет текста маркера

zIndexMarker.style.padding = '2px 4px';

// Добавить маркер на элемент

element.appendChild(zIndexMarker);

});