卡片遮罩必须用relative+absolute组合，因为relative在父容器上创建定位上下文，使absolute遮罩能精准贴合卡片、随其滚动缩放；若只写absolute，遮罩将相对于body定位，滚动时消失。
为什么卡片遮罩必须用 relative + absolute 组合
因为遮罩要“贴在卡片上”，随卡片一起滚动、缩放、悬停，不能脱离上下文乱飞。如果只写 position: absolute，遮罩会直接相对于 body 定位——一滚动就消失在视口外。而 position: relative 在卡片容器上加，不改变布局，只悄悄创建一个定位锚点，让遮罩的 top/left 有明确参照系。
父容器加 relative 的实操细节
这一步最容易被跳过，但漏掉就全盘失效：
-
.card必须显式声明position: relative，哪怕它没写top或left - 不要用
position: static（默认值）或position: absolute替代：前者无定位上下文，后者会让卡片自己脱离文档流，影响整体布局 - 如果卡片内容含图片，记得加
overflow: hidden，否则遮罩超出部分会被裁掉，造成“明明写了却看不见”的假象
遮罩元素的 absolute 定位写法
遮罩层需要覆盖整个卡片区域，同时支持悬停显示/隐藏：
- 设
position: absolute，top: 0、left: 0、width: 100%、height: 100%，确保填满父卡片 - 用
z-index控制层级，一般设为1或更高，避免被子内容盖住 - 配合
opacity和transition实现淡入淡出，比如：opacity: 0; transition: opacity 0.3s ease;，再在.card:hover .overlay里设opacity: 0.7 - 阴影增强层次感：可给遮罩加
box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.5)，比纯背景色更自然
移动端适配与常见翻车点
遮罩在手机上容易失效，核心问题不是写法错，而是参照系被悄悄替换：
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否意外触发了新的 containing block：比如
.card上加了transform或filter，哪怕它是static，也会让子absolute改为相对它定位——此时遮罩可能偏移或尺寸异常 - 真机调试时，打开开发者工具选中遮罩元素，看
Computed面板里的offsetParent是谁；如果不是.card，说明“爹”找错了 - iOS Safari 对
backdrop-filter支持有限，若遮罩内还要加毛玻璃效果，得 fallback 到纯色+透明度
真正麻烦的从来不是怎么写那几行 CSS，而是定位参照链一旦断掉，表现就完全不可预测——所以每次加遮罩前，先确认 .card 的 position 和 offsetParent 是否如你所想。
