fixed定位遮不住某些元素是因为父容器创建了新层叠上下文（如transform、opacity等），使z-index失效；需将遮罩挂到body下、设高z-index并避免共用上下文起点。
fixed定位为什么遮不住某些元素
因为z-index不是万能的，fixed元素会脱离文档流，但它的层叠上下文（stacking context）可能被父容器截断。常见于：父元素设置了transform、opacity、filter或will-change——这些属性会创建新的层叠上下文，导致子元素的z-index只在该上下文内生效，无法压过外部fixed遮罩。
实操建议：
- 检查遮罩盖不住的区域是否在某个带
transform: translateZ(0)或opacity: 0.99的容器里 - 把遮罩元素直接挂到
下，避开所有可能创建层叠上下文的父级 - 遮罩自身必须声明
z-index，且值要足够高（比如z-index: 9999），不能依赖默认值 - 确保遮罩和目标内容没有共用同一个层叠上下文起点（例如都套在同一个
transform容器里）
遮罩点击穿透问题怎么破
用户点了遮罩却触发了背后按钮，说明pointer-events没关。默认fixed遮罩是响应点击的，但引导页遮罩通常不该转发事件——它只是视觉阻断，不是交互控件。
实操建议：
- 给遮罩加
pointer-events: none，再给内部引导内容（如箭头、文字、关闭按钮）单独设pointer-events: auto - 别只靠
opacity: 0或visibility: hidden隐藏遮罩，它们不阻止事件；要用display: none或移除DOM来彻底禁用 - 如果引导内容需要点击关闭，确保关闭按钮的
z-index高于遮罩，否则点不到
移动端fixed遮罩滚动时错位怎么办
iOS Safari 和部分安卓 WebView 中，position: fixed在页面滚动或键盘弹出时容易“粘滞”或偏移，尤其当页面有viewport缩放、height: 100vh或overflow: scroll容器时。
实操建议：
- 遮罩高度不用
100vh，改用min-height: 100%;+height: 100%;，并确保html和body都设height: 100% - 避免在遮罩上用
top: 0; left: 0;以外的定位组合，尤其慎用bottom: 0——iOS对bottom+fixed支持不稳定 - 键盘弹出时，监听
focusin事件，临时把遮罩display: none，失焦后再恢复（否则遮罩可能卡在页面顶部下方）
如何让遮罩适配深色模式与动态字体缩放
遮罩本身是纯视觉层，但它的背景色、文字颜色、尺寸可能随系统偏好或用户设置突变，导致对比度失效或文字溢出。
实操建议：
- 背景用
background-color: rgba(0, 0, 0, 0.7)而非hsl()或color-mix()，避免深色模式自动调色干扰透明度 - 引导文案用
rem单位，配合font-size: clamp(1rem, 2.5vw, 1.25rem)防缩放溢出 - 不要依赖
@media (prefers-color-scheme: dark)重写遮罩样式——它可能在遮罩已显示后才生效，造成闪动；改用CSS custom property配合JS读取window.matchMedia实时更新
最麻烦的其实是遮罩和业务组件之间的层叠竞争——不是CSS写得不对，而是谁先挂载、谁触发重排、谁创建了不可见的层叠上下文。这类问题往往要打开开发者工具的Layers面板，逐层看rendering context，而不是反复调z-index。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
