直接打开layers视图可查看被提升为独立合成层的元素，需通过“show layers”命令调出图层树并启用layer borders显示绿色边框，结合rendering面板与elements面板定位具体节点及合成原因。
直接打开 Layers 视图就能看到哪些元素被提升为独立合成层，关键不是“找入口”，而是让浏览器真正在渲染时创建这些层，并让它们可视化出来。
先确保 Layers 功能可用
新版 Chrome（110+）已将 Layers 整合进 Rendering 面板，但完整图层树仍需手动调出：
- 按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac）打开命令菜单
- 输入 Layers，选择 “Show Layers” 并回车
- 刷新页面后，Layers 标签页会显示图层树和右侧 3D 堆叠视图
用 Layer borders 快速识别合成层范围
静态图层列表不够直观，真正管用的是绿色边框叠加：
- 打开 DevTools → 右上角「⋯」→ More Tools → Rendering
- 勾选 Layer borders（建议同时开启 Paint flashing 和 FPS meter）
- 页面上出现半透明绿色矩形边框，每一块对应一个独立合成层
- 边框越细碎、重叠越多，说明图层分裂越严重（比如每个列表项都加了
will-change: transform）
确认某个元素是否真的成了合成层
不能只看样式写了 transform 或 opacity，得看浏览器实际是否提升：
- 在 Layers 面板中点击某一层，左侧高亮对应 DOM 节点，右侧显示合成原因（如 “has transform”、“is fixed position”、“has opacity”）
- 若本该浮起的弹窗没被单独图层化，检查它是否缺少触发条件：例如补上
transform: translateZ(0)或will-change: transform - 注意隐式合成（implicit compositing）：即使没写任何触发属性，只要跟另一个合成层重叠，也可能被动提升——这常导致 z-index 行为异常
结合 Elements 面板定位具体节点
绿色边框只告诉你“这里有层”，但未必知道是哪个 DOM 元素：
- 鼠标悬停在某个绿色边框上，右下角会显示坐标（如 240x160@120,80）
- 切到 Console，运行
document.elementFromPoint(120, 80)，直接返回该位置的元素 - 右键该元素 → Reveal in Elements panel，展开查看其样式、computed 属性及祖先链深度
- 特别留意
overflow: hidden、clip-path或过深嵌套（≥7 层）——这些都可能截断图层提升路径
