rgba()透明度不能为0或0.01，否则遮罩失效；z-index失效主因是父容器触发层叠上下文；全屏遮罩须用position:fixed+100vw/100vh；禁用opacity改遮罩，应使用background-color:rgba(0,0,0,0.7)或hsl(.../var(--alpha))。
rgba() 不能设成 0 或 0.01，否则遮罩“看不见”；z-index 失效往往不是数值不够大，而是父容器触发了层叠上下文。
rgba(0, 0, 0, 0.7) 是安全起点，别用 opacity 替代
用 background-color: rgba(0, 0, 0, 0.7) 实现半透明遮罩，文字和子元素保持原样不透明；若误用 opacity: 0.7，整个遮罩层及其所有子元素（包括按钮、输入框）都会变淡，视觉和交互都出问题。
-
alpha值选0.6–0.8：太小（如0.02）导致点击无反馈，太大（如1）压死内容 - 别写
rgba(0, 0, 0, var(--alpha))：CSS 变量不能直接插进rgba()参数里，会失效 - 想动态控制透明度？用
background-color: hsl(0 0% 0% / var(--alpha))（现代浏览器），或 JS 改style.backgroundColor
z-index 生效的前提：父容器不能创建新层叠上下文
遮罩层 z-index: 9999 却盖不住按钮？大概率是它的父级设置了 opacity、transform、filter 或 will-change，导致子元素的 z-index 被锁死在该局部上下文中。
- 检查遮罩层的直接父容器，删掉
opacity: 0.99这类“看似无害”的设置 - 遮罩层建议挂载在
<body>直接子节点下，避免嵌套过深 - 若必须嵌套，确保父容器只设
position: relative，其他可能触发层叠上下文的属性一律不加
全屏遮罩必须用 fixed + vw/vh，别靠 width:100%
width: 100% 在某些滚动场景或缩放下会漏边；width: 100vw 和 height: 100vh 才真正覆盖整个视口，且不受父容器 padding 或 margin 影响。
- 必须设
position: fixed，否则滚动时遮罩会跟着动 - top/left 设为
0，而非auto或未声明值 - 加
pointer-events: auto（默认就是 auto，但显式写上防被重置）
遮罩层上放文字/弹窗时，子元素 z-index 必须更高且定位明确
遮罩层本身 z-index: 1000，上面的弹窗却穿不过来？常见原因是弹窗没设 position，或者 z-index 没比遮罩层高——哪怕只高 1 也不够，得高出一个层级“段”。
立即学习“前端免费学习笔记（深入）”；
- 弹窗必须设
position: fixed或absolute，且z-index≥1001 - 文字容器若用
position: absolute，需确保其父容器（比如遮罩层）有position: fixed，否则定位基准错乱 - 别依赖“父低子高”自动提升：子元素
z-index: 1的弹窗，永远盖不过父级z-index: 1000的遮罩层
z-index 突然“失灵”。调试时先查父容器样式，比反复调大 z-index 数值更有效。 
