CSS中如何通过绝对定位实现图片懒加载并占位布局？

本文共计1077个文字，预计阅读时间需要5分钟。

使用 `position: absolute;` 给 `` 标签设置绝对定位，使其相对于最近的定位上下文进行定位。不要尝试使用图像解释，避免使用俚语，不超过100个字，直接输出结果：

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 占位容器（比如一个 <div class="img-placeholder">）必须设为 position: relative，否则 absolute 子元素会相对于最近有定位的祖先找位置，经常找不到预期容器
• 占位容器自身要明确宽高，不能靠子元素撑开；常用方式是用 padding-top 百分比实现响应式宽高比（如 padding-top: 56.25% 对应 16:9）
• 懒加载图片元素需设置 top: 0; left: 0; width: 100%; height: 100%，否则可能只显示左上角一像素

懒加载触发时如何避免布局抖动（layout shift）

图片加载完成瞬间尺寸变化，若没预留正确空间，浏览器会重排，造成文字跳动、按钮位移，影响 CLS（Cumulative Layout Shift）指标。绝对定位本身不解决这个问题，关键在「占位尺寸必须与最终图片渲染尺寸严格一致」。