第一步重置缩放至100%可解决90%重叠问题；第二步用无痕模式排除扩展干扰；第三步通过开发者工具检查z-index、transform等属性定位层叠上下文冲突；第四步清除CSS缓存并强制刷新。
当你在谷歌浏览器中打开某个特定网站时，发现导航栏压在内容上、弹窗被截断、文字与图片重叠、按钮浮在错误位置，这不是网页本身失效，而是本地渲染链路中某处样式规则被覆盖、错位或未生效——必须从浏览器端逐层剥离干扰源，定位真实冲突点。
第一步：确认是否为缩放异常导致的视觉重叠
按 Ctrl + 0（数字零）重置当前页面缩放比例。这一步操作起来很简单，直接敲下组合键即可，右上角会立刻显示“100%”。【90%以上的重叠问题在此步即消失】。若仍重叠，继续下一步。
点击右上角三个点 → “缩放” → 明确点击标有“重置”的选项（不是点“100%”，某些网站会用 JS 覆盖该值，“重置”才能强制清除页面级缩放锁定）。
第二步：用无痕窗口快速排除扩展干扰
按下 Ctrl + Shift + N 打开无痕窗口 → 直接访问同一网址 → 观察排版是否恢复正常。
若无痕模式下一切正常，说明某个已启用的扩展正在注入 CSS 或篡改 DOM。此时不要急着关插件，先记下当前网页 URL，再回到常规窗口执行下一步。
第三步：精准定位样式冲突源（开发者工具实操）
在出问题的页面按 F12 打开开发者工具 → 点击左上角“选择元素”图标（箭头）→ 点击一个明显重叠的元素（比如浮在顶部的 banner 或错位的菜单项）。
右侧“样式”面板中，逐行查看该元素的 CSS 规则：重点找 position: absolute/fixed、z-index、transform、opacity、will-change 这几类属性。若发现某条规则被划掉（灰色删除线），说明它被后续同名规则覆盖了。
切换到“计算样式”标签页 → 搜索 z-index → 查看实际生效值。如果显示 auto，而你预期是 999，说明父容器触发了新的层叠上下文（比如父级有 transform: scale(1.1) 或 opacity: 0.99）——【这是重叠最隐蔽也最常见的原因】。
在“样式”面板中，临时取消勾选父容器的 transform 或 opacity，观察重叠是否立即消失。若消失，就锁定了冲突源头。
第四步：清除损坏的 CSS 渲染缓存
地址栏输入 chrome://settings/clearBrowserData → 时间范围选“所有时间” → 勾选“缓存的图片和文件” → 【不要勾选“Cookie及其他网站数据”】 → 点击“清除数据”。
关闭所有 Chrome 窗口 → 按 Ctrl + Shift + Esc 打开任务管理器 → 找到所有“Google Chrome”进程 → 全部“结束任务” → 重新启动浏览器。
再次打开问题网页，按 Ctrl + Shift + R 强制刷新（跳过缓存重新拉取全部 CSS 和 JS）。
