position 本身不能触发懒加载或骨架动画，因其仅控制元素定位而不参与资源加载或 DOM 生命周期；懒加载需 loading="lazy" 或 IntersectionObserver，骨架动画需额外结构与 CSS 配合。
为什么 position 本身不能触发懒加载或骨架动画
直接用 position: absolute 或 relative 不会触发图片懒加载，也不会自动产生骨架屏效果。CSS 定位只控制元素在页面中的层叠与偏移位置，不参与资源加载逻辑或 DOM 生命周期。懒加载依赖 loading="lazy" 属性或 IntersectionObserver API，骨架动画则需要额外的结构（如伪元素、div 占位）和 CSS 动画配合。
但定位确实关键——它让骨架层和图片层能精准叠在一起，避免布局抖动，也便于控制动画层级关系。
- 骨架容器需设
position: relative，为子元素提供定位上下文 - 真实图片和骨架占位都设
position: absolute; top: 0; left: 0; width: 100%; height: 100%，确保完全重叠 - 用
z-index控制显示优先级：初始时骨架在上（z-index: 2），图片加载完后通过类名切换（如.loaded）把图片提到上层（z-index: 3）并隐藏骨架
如何用纯 CSS 实现骨架屏「流动光效」动画
不需要 JS 控制动画帧，用 @keyframes + background-image: linear-gradient 模拟光扫效果。关键是让渐变背景在固定尺寸的骨架元素上「横向平移」，制造出扫描感。
常见错误是直接对整个容器做 animation: move 2s ease-in-out infinite，但这样光效会随容器缩放失真。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 骨架元素（如
.skeleton）设固定宽高或aspect-ratio，避免拉伸 - 用
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) - 设置
background-size: 200% 100%，再用background-position: -100% 0起始位置 - 动画只移动
background-position：从-100% 0→100% 0
@keyframes shine {
0% { background-position: -100% 0; }
100% { background-position: 100% 0; }
}
.skeleton {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
background-size: 200% 100%;
animation: shine 1.5s ease-in-out infinite;
}
懒加载图片与骨架层如何协同不闪跳
最常踩的坑是图片加载完成瞬间「高度塌陷→撑开」导致骨架突然下移，或者图片尺寸未声明引发回流。解决核心是「尺寸锁定 + 渐变过渡」。
- 必须给图片容器（即
position: relative的父盒）设置明确宽高或aspect-ratio，例如aspect-ratio: 16/9或height: 200px - 图片自身加
width: 100%; height: 100%; object-fit: cover，防止拉伸变形 - 用
opacity和visibility配合过渡，而不是display: none：骨架加transition: opacity 0.3s ease, visibility 0.3s；图片加载完成后加.loaded .skeleton { opacity: 0; visibility: hidden; } - 监听
img的load事件或用loading="lazy"+IntersectionObserver触发类名切换，不要依赖 CSS 自动判断
兼容性与性能要注意的细节
aspect-ratio 在 Safari 15.4+ 才稳定支持，老版本需 fallback 到 padding-bottom 百分比技巧；loading="lazy" 在 iOS Safari 15.4+ 才支持，Android WebView 表现也不一致。
- 骨架动画尽量用
transform和opacity属性，避免触发布局（layout）和绘制（paint），上面的background-position动画在部分低端 Android 上可能掉帧，可改用transform: translateX()驱动一个伪元素遮罩层 - 避免对大量图片同时启用复杂骨架动画，建议结合
IntersectionObserver懒初始化动画：只有进入视口才启动animation-play-state: running - 骨架颜色别用纯灰（
#eee），推荐hsl(210, 8%, 94%)这类带冷调的浅色，更接近现代 UI 的质感
真正难的不是写几行 CSS，而是让骨架的尺寸、动画节奏、加载时机、降级策略全部对齐真实设备的渲染行为。随便复制粘贴一段「骨架代码」很容易，但让它在千元机上不卡顿、在弱网下不闪跳、在 Safari 里不崩形——得一个个条件去试。
