图像被遮挡时应先用开发者工具滚动到元素并添加红色轮廓定位其渲染边界，再检查z-index失效原因（如未设position或父容器创建层叠上下文），最后用getboundingclientrect()验证是否在视口内。
图像被遮挡时如何快速定位 <img alt="HTML5图像位置怎么确定图像被遮挡找不着_被遮挡排查显示操作【操作】" > 元素位置
浏览器里 <img alt="HTML5图像位置怎么确定图像被遮挡找不着_被遮挡排查显示操作【操作】" > 标签没显示，大概率不是图片路径错了，而是它被其他元素盖住了。最直接的办法是打开开发者工具（F12），在 Elements 面板里找到对应 <img alt="HTML5图像位置怎么确定图像被遮挡找不着_被遮挡排查显示操作【操作】" > 标签，右键选「Scroll into view」——如果页面滚动后仍看不到，说明它可能被隐藏、裁剪或 z-index 压在底层。
接着勾选右侧 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的<img alt="HTML5图像位置怎么确定图像被遮挡找不着_被遮挡排查显示操作【操作】" >即便设了z-index: 999，也会被前者挡住（因为后者属于默认层叠上下文，整体低于前者）
用 getBoundingClientRect() 检查图像是否真的在视口内
手动判断图像是否“存在却不可见”，比肉眼更可靠的方式是运行 JS：
