Z-Index 检查器揭示网页上每个元素完整的堆叠顺序。所有具有 z-index 值的元素都会直接在页面上高亮并标注，同时一个排序后的图层映射面板会从下到上展示所有 z-index 层级。该工具可识别由 position、transform、opacity 及其他 CSS 属性创建的堆叠上下文——让 z-index 调试终于变得直观可见。
z-index 缺陷是 CSS 中最令人沮丧的问题之一。一个本应显示在最上层的模态框却被侧边栏遮住了；下拉菜单在下一个区块后面消失了；工具提示因父元素创建了意外的堆叠上下文而不可见。根本原因几乎总是对堆叠上下文工作方式的误解——而浏览器 DevTools 几乎无法帮助你将其可视化。Z-Index 检查器让不可见的变得可见。每个具有显式 z-index 的元素都会获得一个彩色遮罩和显示其值的标注。排序后的图层映射面板列出所有 z-index 值，从最低到最高，显示每个值所属的 CSS class 或元素。更重要的是，该工具可识别堆叠上下文边界——通过 position + z-index、transform、opacity < 1、filter、will-change 或 isolation 创建新堆叠上下文的元素。理解哪个祖先元素创建了堆叠上下文，通常是修复 z-index 缺陷的关键所在。
每个具有 z-index 值的元素都会获得半透明的彩色遮罩和显示其 z-index 数值的标注徽章。z-index 值越高，颜色越暖（红色系）；值越低，颜色越冷（蓝色系）。直观的视觉分层让堆叠顺序一目了然。
侧面板列出页面上所有 z-index 值，从最高（顶部）到最低（底部）排序。每条记录显示 z-index 值、CSS 选择器或 class 名称，以及 position 属性。点击任意记录即可在页面上高亮对应元素。
识别页面上的每一个堆叠上下文边界及创建它的 CSS 属性——position: relative/absolute 配合 z-index、transform、opacity < 1、filter、will-change、isolation: isolate 或 contain: layout。这些信息单独列出，帮助你追踪 z-index 值未按预期工作的原因。
点击面板中的任意图层，即可高亮并滚动至页面上对应的元素。或点击页面上任意高亮元素，即可在图层映射面板中定位它。可按任意自然方向浏览堆叠顺序。
每条图层记录都显示元素的 CSS position 值（static、relative、absolute、fixed、sticky），因为 z-index 仅对已定位元素生效。可快速发现 z-index 已设置但 position 为 static 的情况——这是 z-index 不生效的常见缺陷。
对于任意选中的元素，可查看从该元素到根节点的完整祖先堆叠上下文链。精确了解哪个祖先的堆叠上下文限制了该元素的 z-index 作用范围——这是解决大多数 z-index 调试问题的关键信息。
一个 z-index: 9999 的模态框被 z-index: 10 的侧边栏遮住了，为什么？Z-Index 检查器显示，模态框的父元素设置了 position: relative 并创建了 z-index: 1 的堆叠上下文，而侧边栏的父元素 z-index 为 2。模态框永远无法突破父级上下文的限制。
下拉菜单打开时消失在下一个区块后面。检查器显示，菜单容器设置了 overflow: hidden（这同样会创建堆叠上下文），或下一个区块的 z-index 更高。可视化的图层高亮让层叠关系显而易见。
随着时间推移，z-index 值不断累积：10、100、999、9999、99999。图层映射将所有数值排序显示，便于识别实际所需的范围，并简化为清晰的数值尺度（1、2、3、10、100）。
聊天插件、Cookie 横幅和数据分析遮罩层会注入具有高 z-index 值的元素。Z-Index 检查器精确显示它们使用的数值，帮助你合理设置自己的 z-index 值以避免冲突。
审查页面上所有堆叠上下文，检查是否存在不必要的上下文。为实现视觉效果而应用的 transform、filter 和 opacity 可能会无意中创建堆叠上下文，导致其他地方出现 z-index 问题。上下文列表让所有问题一览无余。
打开 DevSuite Pro 浮动工具栏，点击 Z-Index 检查器图标。工具会扫描页面，识别所有具有 z-index 值的元素和每个堆叠上下文边界。
具有 z-index 值的元素会直接在页面上获得彩色遮罩，标注显示其 z-index 数值。数值越高，颜色越暖；数值越低，颜色越冷。
打开侧面板，查看所有 z-index 图层从高到低排序的列表。每条记录显示数值、选择器和 position 属性。点击任意记录即可在页面上高亮对应元素。
面板的堆叠上下文区块列出所有创建了新堆叠上下文的元素及对应的 CSS 属性。这通常是理解 z-index 问题的关键。
点击任意元素，查看其祖先堆叠上下文链——哪些父级上下文影响了其渲染顺序。沿链向上追踪，找到导致堆叠问题的上下文边界。
