fixed inset-0 bg-black/50 未完全遮罩主因是父容器触发新定位上下文（如 transform），导致 fixed 相对非视口计算；需检查祖先元素并修复 containing block，同时添加 pointer-events-auto 和 z-50 防穿透。
为什么 fixed inset-0 bg-black/50 没有完全遮住页面？
常见现象是遮罩层只盖住了视口高度，滚动后内容露出——根本原因是 fixed 元素默认以视口为参考系，但若父容器设置了 transform、perspective 或 filter，会触发新的定位上下文（containing block），导致 inset-0 相对该容器而非视口计算。
检查是否在 、 或某个祖先节点上用了这些属性；尤其注意 CSS 框架或 UI 库自动注入的样式（比如某些 modal 组件 wrapper）。
- 用浏览器开发者工具选中遮罩元素，看 Computed → Position → Containing Block 是不是预期的 viewport
- 临时给
和加transform: none !important测试是否恢复 - 若必须保留 transform，改用
position: fixed; top: 0; right: 0; bottom: 0; left: 0;（Tailwind 不生成这组规则，需自定义或内联）
遮罩层点击穿透怎么办？
bg-black/50 本身不阻断事件，如果背后可点击区域仍响应，大概率是遮罩元素缺少 pointer-events 控制。
Tailwind 默认不设 pointer-events，需显式添加：
立即学习“前端免费学习笔记（深入）”；
- 加
pointer-events-auto（等价于pointer-events: auto）让遮罩自身可响应点击（比如关闭模态框） - 加
pointer-events-none时，遮罩完全透传事件——这常被误用于“仅视觉遮罩”，但实际会导致背后按钮被点中 - 更安全的做法是：遮罩层用
pointer-events-auto，再用z-50确保层级高于目标内容
示例：
Stable Diffusion 2.1 Demo
最新体验版 Stable Diffusion 2.1
下载
移动端 Safari 滚动时遮罩层抖动或错位
iOS Safari 在地址栏收放、键盘弹出时会重算视口高度，fixed 元素可能短暂错位。这不是 Tailwind 的问题，而是浏览器渲染机制。
关键不是改 Tailwind 类，而是控制行为时机：
- 避免在
scroll或resize事件中动态切换遮罩状态；优先用 CSS 类切换 +transition - 给遮罩层加
will-change: transform（用class="will-change-transform"配合自定义插件或内联）能减少重绘抖动 - 若遮罩伴随 modal 弹出，确保 modal 容器也用
fixed，且两者不嵌套（遮罩和 modal 应为兄弟节点）
如何让遮罩适配深色模式？
bg-black/50 在深色背景下对比度不足，用户可能看不见遮罩效果。
不要硬编码颜色值，用 Tailwind 的暗色模式变体：
- 写成
bg-black/50 dark:bg-white/50—— 注意dark:前缀需开启 dark mode 支持（darkMode: 'class'或'media'） - 若用
class方式，确保上有dark类（手动切换或 JS 控制） - 更稳妥的是用语义化颜色：如
bg-gray-900/50 dark:bg-gray-100/50，比黑白更可控
别依赖系统偏好自动生效——很多用户开了深色模式但网站没配 darkMode: 'media'，结果遮罩还是黑的。
遮罩看着简单，真正卡住人的永远是定位上下文、事件穿透和移动端渲染细节。尤其是嵌套了第三方组件或用了 CSS-in-JS 库时，fixed 的行为很容易被悄悄劫持。