遮罩层无效主因是z-index未生效或父容器缺失定位上下文；需确保遮罩设position: absolute/fixed及z-index，父容器设position: relative，避免opacity/transform创建新层叠上下文。
background: rgba(0,0,0,0.5) 为什么遮不住内容？
遮罩层没效果，大概率是 z-index 没生效或父容器没定位上下文。CSS 的 z-index 只对「已定位元素」（即 position 为 relative、absolute、fixed 或 sticky）起作用，纯 static 元素设了也白搭。
- 确保遮罩层本身有
position: absolute或fixed，且设置了z-index - 检查它的父容器是否无意中创建了新的层叠上下文（比如加了
opacity、transform或will-change），这会让子元素的z-index相对父级生效，而非全局 -
background: rgba(0,0,0,0.5)本身没问题，但若父容器有background-color且没设transparent，可能视觉上“吃掉”半透明效果
遮罩层要铺满整个视口，该用 position: fixed 还是 absolute？
取决于你要盖住的是整个页面，还是某个局部模块。两者行为差异明显，选错会导致遮罩错位或滚动失效。
- 全屏遮罩（如弹窗背景、加载态）必须用
position: fixed，配合top: 0; left: 0; width: 100vw; height: 100vh; - 只盖住某个卡片或区域时，用
position: absolute，但父容器必须设position: relative（否则会相对 viewport 定位） - 避免用
width: 100%+height: 100%代替vw/vh：当父容器高度由内容撑开时，100%可能为 0
rgba 黑色遮罩在深色模式下变灰，怎么保持视觉一致性？
不是 bug，是预期行为：rgba(0,0,0,0.5) 在深色背景下透出的内容本身更暗，人眼感知的“遮罩强度”就下降了。单纯调高 alpha 值（比如到 0.7）治标不治本，还可能影响浅色模式下的可读性。
- 优先考虑用
backdrop-filter: blur(2px)配合低 alpha，它能动态响应底层颜色，但注意 Safari 旧版本和部分安卓 WebView 不支持 - 如果必须兼容老环境，可借助
@media (prefers-color-scheme: dark)单独调整background的 rgba 值，例如深色模式下用rgba(0,0,0,0.65) - 别忘了测试滚动时遮罩是否随内容偏移——
fixed能避免这个问题，absolute则容易漏掉
遮罩层点击穿透（背后按钮还能点），怎么拦截？
这是最常被忽略的交互细节。默认情况下，半透明遮罩只是“看起来盖住了”，DOM 事件仍会穿过它落到下层元素上。
- 加
pointer-events: none是常见错误——它让遮罩自己不可交互，也关掉了拦截能力 - 正确做法是加
pointer-events: auto（默认值）并确保遮罩层在层叠顺序上真正盖住目标元素 - 如果遮罩后还要响应点击（比如点击关闭弹窗），直接绑定
click事件即可；如果纯作视觉隔离，加cursor: default更友好 - 移动端要注意
touch-action: none，防止 iOS 上滑动穿透
rgba，而是没意识到 z-index 和 position 是一对绑定操作，漏掉任一环，遮罩就形同虚设。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
