用 position: absolute 做全屏加载动画易偏移，因其定位参考系是最近已定位祖先，父级无定位或含 transform/overflow:hidden 时会错位裁切；ios safari 对 100% 高度解析不稳定；居中需 top:50%;left:50%;transform:translate(-50%,-50%)；推荐改用 position:fixed+flex 实现稳定全屏遮罩。
为什么用 position: absolute 做全屏加载动画容易偏移
不是写 top: 0; left: 0; width: 100%; height: 100% 就能真“全屏”。position: absolute 的定位参考系是最近的已定位祖先（即 position 为 relative、absolute 或 fixed 的父元素），如果父级没设定位，它会相对于初始包含块（通常是视口）——但这个行为在滚动时不可靠，且一旦父容器有 transform 或 overflow: hidden，就可能被裁切或错位。
- 常见现象：动画只覆盖可视区上半部分，或随页面滚动而移动
- 根本原因：父容器没设
position: relative，或自身被包裹在某个有transform的组件里（比如 Vue 的keep-alive容器、Ant Design 的Card） - 移动端尤其敏感：iOS Safari 对
100%高度解析不稳定，100vh在软键盘弹出时还会收缩
position: absolute 居中必须配 transform，不能只靠 margin: auto
margin: auto 在 position: absolute 下仅对宽高固定、且 left/right 或 top/bottom 成对设为 0 时才生效，兼容性差，安卓 WebView 几乎不认。真正稳的写法是：
-
top: 50%; left: 50%把元素左上角锚定到视口中心 - 再加
transform: translate(-50%, -50%)回拉自身宽高的一半 - 必须显式设置子元素宽高（如
width: 40px; height: 40px），否则translate(-50%, -50%)计算基准模糊，SVG 或文字内容易抖动 - 旧浏览器需补前缀：
-webkit-transform: translate(-50%, -50%)
z-index 失效？大概率是父级创建了新层叠上下文
即使写了 z-index: 9999，动画仍被盖住，问题不在数字不够大，而在父容器触发了层叠上下文。典型诱因包括：
- 父级设置了
transform（哪怕只是transform: translateZ(0)） - 父级有
opacity小于 1、filter、will-change等属性 -
body或html设了overflow: hidden—— 这会导致 fixed/absolute 元素被裁切，尤其在 iOS Safari
解决办法：把加载动画直接挂到 document.body 下，避免嵌套在任何业务组件内部；若必须嵌入，确认其最近的已定位祖先没有上述属性。
比 absolute 更推荐用 position: fixed + flex
除非你受限于 IE10–IE11 或只能向第三方组件注入 DOM，否则别用 absolute 实现全屏加载遮罩。当前最稳方案是：
-
position: fixed锚定视口，不受滚动影响 -
top: 0; left: 0; width: 100vw; height: 100vh—— 必须用vw/vh，不用% -
display: flex; justify-content: center; align-items: center居中，不依赖子元素尺寸 -
z-index: 9999，并检查当前项目 UI 框架的最高 z-index（Ant Design 是 1000，Element Plus 是 2000） - 禁用
overflow: hidden，移动端加overscroll-behavior: contain防止底层滚动
真正容易被忽略的是：遮罩容器必须保持 pointer-events: auto，禁用交互要靠给业务区域加 pointer-events: none，而不是靠遮罩本身拦截事件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
