图像被遮挡时应先用开发者工具滚动到元素并添加红色轮廓定位其渲染边界，再检查z-index失效原因（如未设position或父容器创建层叠上下文），最后用getBoundingClientRect()验证是否在视口内。
图像被遮挡时如何快速定位 ![HTML5图像位置怎么确定图像被遮挡找不着_被遮挡排查显示操作【操作】]()
浏览器里
接着勾选右侧 Styles 面板里的 outline: 1px solid red !important;（可临时加在 :hover 或直接编辑样式），立刻就能看清它的实际渲染边界，包括是否被父容器 overflow: hidden 截断、是否 position: absolute 偏移出视口、或者 visibility: hidden / opacity: 0 导致不可见但占位。
z-index 失效导致图像被压在底层的典型场景
z-index 只对「定位元素」（position 为 relative、absolute、fixed 或 sticky）生效。如果图像本身没设 position，只写 z-index: 999 是无效的。
- 检查图像自身是否设置了
position；没设就补上position: relative再试z-index - 检查图像的父容器是否有
transform、filter、will-change等属性——这些会创建新的层叠上下文（stacking context），使子元素的z-index相对于该父容器而非全局 - 对比同级兄弟元素的层叠上下文层级：比如一个
div设了position: relative; z-index: 1，另一个没设z-index的z-index: 999，也会被前者挡住（因为后者属于默认层叠上下文，整体低于前者）
用 getBoundingClientRect() 检查图像是否真的在视口内
手动判断图像是否“存在却不可见”，比肉眼更可靠的方式是运行 JS：
立即学习“前端免费学习笔记（深入）”；
const img = document.querySelector('img[src*="your-keyword"]');
console.log(img?.getBoundingClientRect());
输出的 top、left、right、bottom 值如果全是 0 或负数，常见原因有：
-
display: none或父元素是display: none（此时getBoundingClientRect()返回全 0） - 图像在
overflow: hidden容器内且位置超出范围（top> 容器高度，或left> 容器宽度） - 使用了
clip-path或mask把图像内容裁空了，但元素框还在
图像路径正确但加载失败的隐蔽原因
控制台没报 404，但图像就是不出现，要查这几个非路径类问题：
-
width和height但值为0或负数（如width="-10"）——部分浏览器会拒绝渲染 - 图片格式是 WebP/AVIF，但旧版 Safari 或 IE 不支持，且未提供
- CSP（Content Security Policy）头禁止了内联或第三方图片加载，检查 Response Headers 中的
content-security-policy是否含img-src 'self'却尝试加载外部链接 - 图像 URL 含中文或特殊字符但未
encodeURI，服务端返回 400，浏览器静默失败（DevTools Network 面板看 status 是否异常）
真正难排查的，往往是图像渲染框存在、尺寸正常、控制台无报错，但被一个没命名的伪元素、透明遮罩层或 CSS 动画的 scale(0) 卡在不可见状态——这时候别猜，直接用「强制 outline + 逐层关闭父元素 visibility」来二分排除。
