绝对定位遮罩需配对父容器position: relative、四边设0撑满、z-index同层叠上下文；否则易错位、不可见或盖不住内容。
绝对定位本身不提供半透明效果，真正起作用的是 background-color: rgba() —— 但若没配对好定位上下文和尺寸控制，遮罩大概率看不见、盖不住、或错位。
父容器必须设 position: relative
这是最常被跳过的一步。position: absolute 的遮罩层会向上查找「最近的已定位祖先」来确定定位基准。如果父容器是 position: static（默认值），遮罩就会相对于 <body> 定位，极大概率跑出可视区。
- 给遮罩的直接父容器加
position: relative，哪怕它只是个空<div> - 不要依赖 Bootstrap 的
.container或.card自带定位——它们默认没有 - 如果父容器高度为 0（比如只含浮动子元素且未清除），遮罩也铺不满，需补
height或触发 BFC
top/left/right/bottom: 0 比 width/height: 100% 更可靠
用 width: 100%; height: 100% 看似直观，但它依赖父容器有明确宽高；而四边设为 0 能强制撑满「已定位祖先」的内容区域，兼容性更好、行为更确定。
- 遮罩样式中写
top: 0; left: 0; right: 0; bottom: 0，不用管父容器是否设置了height - 如果父容器用了
padding，遮罩会覆盖 padding 区域；如需避开，改用inset（现代浏览器）或手动减去 padding 值 - 配合
box-sizing: border-box可避免边框影响铺满效果
z-index 失效？先查层叠上下文分裂
写了 z-index: 999 却盖不住某个按钮或导航栏，大概率不是数值不够大，而是遮罩和目标元素不在同一个层叠上下文中。
立即学习“前端免费学习笔记（深入）”；
- 检查遮罩父容器是否用了
transform、opacity < 1、will-change或filter—— 这些都会隐式创建新层叠上下文，把遮罩“关”进去 - fixed 导航栏天然创建独立层叠上下文，需统一根节点：给导航栏设
z-index: 100，遮罩设z-index: 101，且二者父级都应是<body>直接子元素 - 浮动元素本身不创建层叠上下文，
z-index对它无效；遮罩要盖住浮动内容，必须和它同属一个position: relative父容器
移动端 Safari 渲染异常怎么处理
iOS Safari（尤其 15.x 及更早）对 rgba() + position: fixed 或 transform 组合敏感，滚动时可能出现闪动、偏色或半透明失效。
- 加
backface-visibility: hidden或transform: translateZ(0)强制 GPU 加速，多数情况可缓解 - 避免用
rgba(0, 0, 0, 0.45)这类非整数 alpha 值，改用0.4或0.5提升渲染一致性 - 深色模式下
rgba(0, 0, 0, 0.5)几乎不可见，建议用媒体查询降级：@media (prefers-color-scheme: dark) { .mask { background-color: rgba(255, 255, 255, 0.3); } }
真正麻烦的从来不是写几行 CSS，而是当遮罩“看起来没生效”时，得一层层排查：父容器有没有定位？尺寸有没有撑开？层叠上下文是不是被意外切开了？这些细节在开发时容易忽略，上线后却最难复现。
