遮罩层必须用 position: absolute 以脱离文档流并精准覆盖目标元素；父容器需设 position: relative 等触发定位上下文；配合 top:0;left:0;width:100%;height:100% 或 inset:0 填满，注意 box-sizing: border-box 和避免 opacity 影响子元素。
遮罩层为什么必须用 position: absolute？
因为遮罩层的核心诉求是「覆盖在目标元素之上，且不干扰原有文档流」。如果用 position: relative，它仍占据原始空间，可能撑开父容器；用 float 或默认 static 更无法精准叠盖。只有 absolute（配合合适的定位上下文）能脱离流、自由悬浮。
- 父容器需设
position: relative（或absolute/fixed），否则absolute会向上找最近的「已定位祖先」，可能错位到body甚至视口外 - 遮罩层自身设
top: 0; left: 0; width: 100%; height: 100%，才能严丝合缝填满父容器 - 若父容器有
padding或border，而遮罩需覆盖整个可视区域（含内边距），则改用inset: 0（现代写法）或显式计算width: calc(100% + 2 * padding)
盒模型填充不生效？检查 box-sizing 和尺寸来源
遮罩层填不满，常不是定位错了，而是盒模型理解偏差：默认 box-sizing: content-box 下，width: 100% 只指内容区宽度，若加 padding 或 border，实际占位就超出了。
- 统一加
box-sizing: border-box，让width和height包含padding和border - 避免给遮罩层设
padding—— 它本应是「透明幕布」，留白应由被遮盖的内容自己控制 - 若需阴影或描边效果，用
box-shadow或outline，而非border，避免触发尺寸溢出
背景半透但文字不清？别只调 opacity
直接给遮罩层设 opacity: 0.5 会导致内部所有子元素（比如弹窗、按钮）也变半透，这不是遮罩该有的行为。
- 正确做法：用
background-color: rgba(0, 0, 0, 0.5)，仅背景透，内容不受影响 - 若需兼容 IE8，可用
background-color: #000; filter: alpha(opacity=50)（但仅限 IE 专有，现代项目可忽略） - 切忌对遮罩层设
z-index: -1——它会掉到父容器背后，彻底不可见
遮罩层真正难的不是写法，而是判断「谁该当定位上下文」和「要不要响应式重算尺寸」。很多问题出现在嵌套滚动容器里，此时 position: fixed 可能比 absolute 更稳，但会脱离局部滚动上下文——得看遮罩要随页面滚，还是锁死在视口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
