fixed遮罩无法限制在父容器内，因其始终相对于视口；正确方案是父容器设position: relative，遮罩用position: absolute+inset: 0填满，并避免transform/filter等触发新层叠上下文。
做不到。fixed 定位的遮罩层天然无法“只覆盖特定父容器”——它永远相对于视口，这是 CSS 规范决定的。你真正需要的不是 fixed，而是 position: absolute + 正确的定位上下文。
为什么 fixed 不能限制在父容器内
浏览器对 position: fixed 的定义就是：锚定在视口（viewport）坐标系，无视所有祖先元素的滚动、缩放、transform 或 overflow 状态。哪怕 DOM 结构上它嵌套在 .card 里，滚动时它也纹丝不动地悬在屏幕某处，根本不会“跟着父容器走”。
常见错误现象包括：
- 遮罩随页面滚动消失，只盖住初始可视区
- 父容器用了
transform: scale(0.9)，遮罩位置完全错乱 - 父容器有
overflow: hidden，遮罩边缘被裁切
用 absolute 替代 fixed，并确保父容器是定位上下文
要让遮罩“贴着父容器动”，必须让父容器成为它的定位参考点。这要求：
立即学习“前端免费学习笔记（深入）”；
- 父容器显式设置
position: relative（Bootstrap 的.modal-content默认已是，但.modal-dialog不是，需手动加） - 遮罩自身设
position: absolute，再用inset: 0或top: 0; left: 0; width: 100%; height: 100%填满 - 避免父容器带
transform、filter、opacity < 1—— 这些会创建新层叠上下文，导致遮罩层级失效
示例结构：
<div class="card" style="position: relative;"> <img src="..."> <div class="overlay" style="position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 10;"></div> </div>
遮罩铺不满或错位的三个关键检查点
即使用了 absolute，仍可能出问题，重点查：
-
inset: 0兼容性：Safari 14.1+ 支持，旧版需回退为top: 0; right: 0; bottom: 0; left: 0 - 父容器是否有
padding或border？inset: 0从 border box 开始算，若要严格贴内容区，改用top: 0; left: 0; width: 100%; height: 100%并配合box-sizing: border-box - 遮罩是否意外继承了父容器的
transform？DevTools 中检查 computed 样式里的transform和contain，有就干掉
移动端滚动时遮罩抖动或偏移
iOS Safari 地址栏收起/展开会动态改变视口高度，而 position: absolute 元素依赖父容器尺寸，若父容器高度未固定（如靠内容撑开），遮罩就会跳变。
解决方法：
- 给父容器设明确高度，例如
max-height: 500px; overflow-y: auto - 避免用
vh单位计算父容器高度（iOS 下不可靠），改用px或rem - 遮罩内需居中时，别用
margin: auto，改用display: flex; justify-content: center; align-items: center
真正容易被忽略的是：遮罩的 z-index 生效前提——父容器必须是定位元素，且不能自己触发新层叠上下文。一旦漏掉 position: relative 或误加 transform，遮罩就彻底失控。
