全屏loading占位图必须用position: fixed，因其能始终贴住视口四边、不随滚动偏移；用absolute会因容器变化错位或消失，且需配合vw/vh、z-index: 2147483647、pointer-events: none（或auto）、::before伪元素、opacity+visibility过渡及移动端vh失真处理等关键细节。

全屏Loading占位图必须用fixed定位，不能用absolute

用position: absolute套在某个容器里，一旦页面滚动或容器尺寸变化，占位图就会错位甚至消失；只有position: fixed能真正覆盖整个视口，且不随滚动偏移。关键不是“盖住”，而是“始终贴住视口四边”。

• top: 0; left: 0; width: 100vw; height: 100vh;是基础，但width: 100%在某些移动端会因滚动条宽度变化而抖动，必须用vw/vh
• 加z-index: 9999不够——要确保高于所有业务层，推荐设为z-index: 2147483647（CSS最大整数值），避免被第三方弹窗或广告遮挡
• 别忘了pointer-events: none，否则会拦截点击，真实内容无法交互；若需遮罩禁用操作，则改用pointer-events: auto + 半透明背景

::before伪元素比单独div更轻量，且无需JS插入

直接写一个<div class="loading-overlay"></div>要靠JS控制显隐，容易在SSR中提前渲染、被搜索引擎抓取；用::before伪元素挂载在body或根容器上，加载完成时只需切换class，DOM零新增。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 必须给宿主元素（如body）设position: relative，否则::before的fixed定位会失效
• content: ""不可省略，否则伪元素不渲染；background-image建议用linear-gradient而非图片，减少HTTP请求
• 动画用background-position平移，别用transform: translateX()——后者在iOS Safari上可能触发闪烁或掉帧

加载完成时display: none会引发布局跳动，该用opacity+visibility

直接删掉或设display: none，会导致浏览器重排，后续内容“啪”一下上移；尤其在首屏有固定定位导航栏时，跳动更明显。

• 正确做法：初始状态设opacity: 1; visibility: visible，完成时改为opacity: 0; visibility: hidden; transition: opacity 0.25s ease
• 必须同时用visibility: hidden，否则opacity: 0仍占位、可能拦截事件（比如遮住下方按钮）
• transition时间不能短于0.15s，否则人眼感知为“硬切”；也不能长于0.3s，否则显得滞后

移动端需额外处理地址栏隐藏导致的vh失真

iOS Safari和部分Android浏览器在滚动时会隐藏地址栏，100vh会突然变大，造成Loading层短暂“撑高”或露出底部空白。

• 方案一：用min-height: -webkit-fill-available替代height: 100vh，Safari专属修复
• 方案二：监听resize事件，用window.innerHeight动态更新style.height，但必须防抖（setTimeout延时50ms再执行）
• 方案三：最稳——放弃vh，改用height: 100% + html, body { height: 100% }，并确保根元素没overflow: hidden干扰

复杂点在于，不同浏览器对fixed与transform父级的兼容性不一致——如果页面某层用了transform: translateZ(0)做硬件加速，fixed定位在旧版Chrome里会退化为absolute。这种情况下，得回退到position: absolute + top: 0; left: 0; right: 0; bottom: 0，再用will-change: transform强制重绘。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！