必须用 position: fixed，因为它使进度条始终锚定视口顶部不随滚动偏移；absolute 易受父容器定位上下文影响而错位或消失，sticky 无法线性响应滚动比例，relative 和 static 则无法脱离文档流实现固定显示。
纯 CSS 无法感知页面加载状态，所谓“通过 CSS 定位实现加载进度指示”，本质是用定位（position: fixed 或 position: absolute）把进度条“钉”在可视区域特定位置，再配合其他 CSS 动画机制模拟进度——定位本身不提供进度逻辑，只解决显示位置问题。
为什么必须用 fixed/absolute 而不是 relative 或 static
加载进度条需始终可见、不随内容滚动偏移、不被布局流挤走。常见错误是直接套在 <header></header> 或 <main></main> 内部用 position: relative，结果一滚动就消失或错位。
-
position: fixed最稳妥：绑定视口，top: 0; left: 0; width: 100%;可覆盖顶部横条；移动端注意加z-index: 9999避免被弹窗遮盖 - 避免用
position: absolute相对于 body —— 某些 CMS 或框架会动态插入 DOM 节点，导致父级 offsetParent 变化，条位置漂移 - 别给 fixed 元素设
transform（如scaleY(0.5)），iOS Safari 下可能触发渲染异常，高度失真
定位容器里该放什么动画机制
定位只是“挂载点”，真正驱动视觉进度的得选对底层机制。width 动画最直观但最脆弱，transform 更稳但需额外适配。
- 用
transform: scaleX()：在 fixed 容器内放一个::after伪元素，初始transform: scaleX(0)，动画到scaleX(1)。不触发布局，移动端帧率更稳 - 禁用 width 动画：若坚持用 width，务必确保 fixed 容器有明确
width: 100vw（不是100%），否则在横向滚动页面中会截断 - linear-gradient + background-position：适合顶部细条，用
background: linear-gradient(...)配合background-position: -200% 0, 0 0动画，无需子元素，DOM 更轻
fixed 定位下容易被忽略的兼容性坑
看似简单的 position: fixed 在真实项目里常因环境差异失效。
- iOS Safari 中，如果页面
body有overflow-y: scroll（比如为了禁止橡皮筋效果），fixed 元素会相对于这个滚动容器定位，而非视口——此时要改用position: sticky; top: 0;替代 - Android WebView 旧版本（≤ Android 6）不支持
fixed在input聚焦时保持位置，键盘弹出会顶飞进度条；可监听focusin临时切为absolute+top: document.scrollingElement.scrollTop - 别依赖
vh单位算高度：1vh在 iOS Safari 地址栏收起/展开时会跳变，改用px（如height: 2px）或clamp(1.2px, 0.15vh, 2px)
定位本身不解决“何时开始、何时结束、进度多少”这些核心问题，它只是把动画结果准确地摆在用户眼前。真正决定体验是否真实，取决于 JS 是否及时接管状态——哪怕你用了最稳的 transform 动画，没 JS 触发完成态，进度条就会一直跑下去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
