fixed定位动画需设高z-index（如9999）、避免父级transform创建新层叠上下文、用top/left+transform居中，禁用overflow:hidden，静态预置dom并用css动画，移动端需监听resize重置位置。
fixed定位导致动画被遮挡或偏移
用 position: fixed 做全屏加载动画时，最常出现的不是“没显示”，而是“显示了但位置不对”或者“被其他元素盖住”。根本原因在于 fixed 元素脱离文档流，它的层级（z-index）和父容器无关，只和同级的 fixed/absolute 元素比。
- 务必给加载动画容器显式设置
z-index: 9999（数字够大，避开主流 UI 框架的默认值，比如 Element Plus 是 2000，Ant Design 是 1000） - 检查 body 或 html 是否有
overflow: hidden—— 这会导致 fixed 元素在滚动时被意外裁切，尤其在移动端 Safari 上更敏感 - 避免把 loading 容器写在某个局部组件内部再用 fixed：它会继承父组件的 transform（比如
transform: translateZ(0)），而任何非 none 的 transform 都会创建新的层叠上下文，让 z-index 失效
居中失效：margin auto 不起作用
margin: 0 auto 对 fixed 元素无效，因为它不依赖父宽。真正可靠的居中方式只有两种：top/left + transform，或 flex 布局。
- 推荐方案：
top: 50%; left: 50%; transform: translate(-50%, -50%);—— 兼容性好，IE10+ 都支持 - 如果页面根容器（
html或body）已设display: flex，可直接对 loading 容器用margin: auto，但要注意这会让它成为 body 的子元素，需确保 body 高度撑满视口（min-height: 100vh） - 别用
top: 0; bottom: 0; margin: auto;模拟居中——在某些安卓 WebView 下计算异常，垂直方向容易偏上
动画闪烁或首次渲染白屏
常见于 Vue/React 动态插入 loading 元素的场景：DOM 插入瞬间没有样式、浏览器来不及重绘，造成闪一下才动起来。
- 提前在 HTML 底部静态写一个隐藏的 loading 容器：
<div id="global-loading" style="display:none"></div>，JS 只负责 show/hide 和 class 切换，避免 insert 操作 - 关键动画属性必须用 CSS 实现，不要用 JS 改 top/left —— 否则触发 layout，掉帧明显；优先用
opacity+scale或rotate - 加
will-change: transform到动画元素上（仅限真正需要高性能动画的场景），但别滥用，否则可能引发内存泄漏或 GPU 占用过高
移动端适配：缩放与视口干扰
在 iOS Safari 或部分安卓浏览器里，fixed 元素在 pinch-zoom 或 orientation change 后可能错位，甚至固定到错误坐标。
- 确保
<meta name="viewport">中不含user-scalable=no，否则某些系统会禁用 fixed 的重定位逻辑 - 监听
resize和orientationchange事件，手动重置一次top/left（哪怕只是赋值不变），强制浏览器重新计算 fixed 位置 - 避免在 loading 容器上设置
font-size: xx-small或极小的 width/height —— iOS 会因字体缩放规则误判为文本内容，导致 fixed 行为异常
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
