图像不显示主因是路径解析失败而非文件缺失；CSS定位“消失”多因脱离文档流或尺寸坍缩；响应式偏移源于混用单位；滚动抖动常由重排触发，应改用transform；务必声明宽高防重排。
图像不显示但路径确认无误
多数情况是路径解析失败，而非文件不存在。浏览器中右键「检查元素」，看 src 属性值是否被正确解析为完整 URL（比如变成 http://localhost:3000/images/logo.png 而非相对路径 images/logo.png）。常见坑点：
- 路径含中文或空格，未编码——改用英文命名或手动 URL 编码
%E4%BC%98 - 使用了
file://协议直接双击打开 HTML——现代浏览器会因安全策略禁止加载本地src图像，必须通过本地服务器（如python3 -m http.server）访问 -
src值被 JS 动态赋值时拼错变量，例如写成img.src = './img/' + name + '.jpg'但name是undefined，最终请求./img/undefined.jpg
CSS 定位后图像“消失”或错位
图像本身仍存在，但视觉上不可见，常因定位脱离文档流或尺寸坍缩导致。重点查三类设置：
-
position: absolute或fixed时，父容器未设position: relative（或非static），导致参照系错误，图像飞出视口 -
top/left值为负数且父容器overflow: hidden，图像被裁剪不见 - 对
width: 0、visibility: hidden或opacity: 0，但没意识到这些属性不影响布局计算，容易误判为“没加载”
响应式图像位置在不同屏幕下偏移严重
根本原因是混用单位或未处理 intrinsic 尺寸。HTML5 原生响应式方案（srcset + sizes）只控制**加载哪张图**，不控制**怎么摆**；位置逻辑仍在 CSS 中。
- 避免用
px写死top/left，改用rem、%或vw/vh，并搭配transform: translate()实现精准微调 - 若用
background-image替代background-position默认是0% 0%（左上），而vertical-align默认是baseline，二者基线不同，混用时位置必然不一致 - 检查是否遗漏
max-width: 100%和height: auto——缺失会导致图像撑破容器，间接影响定位上下文
图像位置随滚动“抖动”或跳变
典型于使用 position: sticky 或监听 scroll 事件做动态定位的场景。抖动往往不是逻辑错，而是渲染时机问题：
立即学习“前端免费学习笔记（深入）”；
- 在
scroll回调里直接修改element.style.left触发频繁重排（reflow）——应改用transform: translateX()，走合成层（compositor），避免 Layout -
sticky元素的祖先节点有overflow: hidden或transform，会创建新的 containing block，使 sticky 失效或行为异常 - 图像本身宽高未声明（即没设
width/height属性），加载完成前占位面积为 0，加载后突然撑开，引发周围元素重排，连带定位元素跳动；务必显式设置宽高或用aspect-ratio占位
