DevTools z-index：打印所有按z-index排序的元素

你有没有在网页设计中遇到过这样的问题：某个元素总是被其他元素挡住，无论怎么调整都找不到原因？这时候，z-index就派上用场了。z-index是一个CSS属性，用于控制元素的堆叠顺序。数值越大，元素越靠上。那么，如何查看页面中所有元素的z-index并按顺序排列呢？这就需要用到浏览器的开发者工具（DevTools）了。

使用DevTools查看z-index

首先，我们需要打开浏览器的开发者工具。以Chrome为例，你可以通过以下几种方式打开：

快捷键：按下 Ctrl + Shift + I（Windows）或 Cmd + Option + I（Mac）。
右键菜单：在网页上右键点击，选择“检查”。
菜单栏：点击浏览器右上角的菜单按钮，选择“更多工具” -> “开发者工具”。

打开DevTools后，切换到“Console”选项卡。这里是我们输入JavaScript代码的地方。

打印所有z-index元素

接下来，我们需要一段JavaScript代码来获取页面中所有带有z-index的元素，并按z-index值排序。将以下代码粘贴到Console中并运行：

    javascript
    (() => {
  const elements = [...document.querySelectorAll('*')];
  const zIndexElements = elements
    .map(el => {
      const zIndex = window.getComputedStyle(el).zIndex;
      return { element: el, zIndex: parseInt(zIndex, 10) || 0 };
    })
    .filter(item => item.zIndex !== 0)
    .sort((a, b) => b.zIndex - a.zIndex);

  console.table(zIndexElements.map(item => ({
    'Element': item.element.tagName,
    'z-index': item.zIndex,
    'Class': item.element.className,
    'ID': item.element.id
  })));
})();