绝对定位不是骨架屏推荐方案，因其导致布局跳动；应使用relative+伪元素锚定、background-position动画扫光、内联样式防闪白，并注意移动端图片比例控制。
绝对定位不是骨架屏的推荐方案
直接用 position: absolute 构建骨架屏，大概率会导致内容加载时“跳一下”或布局错位。因为绝对定位元素脱离文档流，父容器高度塌陷，后续真实内容渲染时会重新计算布局——这和骨架屏“占位不挤占”的核心目标背道而驰。
relative + 伪元素才是可靠锚点
骨架屏必须依赖 position: relative 容器 + ::before/::after 伪元素，原因很实在：
- 伪元素默认不参与文档流，但能被
relative父容器精准锚定位置 - 加载完成只需切换
visibility: hidden或opacity: 0，不触发重排 - 避免插入额外 DOM 节点，不影响 SSR 渲染顺序、SEO 和无障碍读取
漏掉任一条件都会翻车：position 必须显式写 relative（不能靠继承或默认值），容器 height 不能是 auto，且内部浮动/绝对定位子元素需用 overflow: hidden 或 display: flow-root 控制高度计算。
background-position 动画比 transform 更稳
很多人想用 transform: translateX() 移动扫光层，但在 Safari 和部分安卓 WebView 中容易边缘发虚、锯齿明显。真正稳定的做法是：
- 用
background-image叠加两层渐变：底层结构灰 + 上层透明扫光条 -
background-size必须大于容器宽度（如200% 100%或300px 100%，不能用rem） -
background-position动画从-100% 0到100% 0，方向固定为to right或90deg - 每个骨架容器必须加
overflow: hidden，否则圆角区域会露底色
内联样式是 SSR 首屏不闪白的前提
骨架屏样式必须写在 HTML 的 里，用 <style></style> 标签内联。外链 CSS 或 @import 会延迟生效，弱网下可能有 200ms+ 白屏——用户看到的不是“占位”，而是“失位”。
内联样式要精简、确定、兼容：
- 不用 CSS 变量、嵌套、
rem单位（iOS Safari 不支持rem在background-size中） - 关键规则加
!important防止被后续外链 CSS 覆盖 - 动画名用简短唯一值（如
sh），避免冲突
最易被忽略的是：移动端图片占位若只设 height，缩放后比例失真；必须用 aspect-ratio 或 padding-top fallback + position: absolute 子元素兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
