给浮动缩略图的直接父容器加 position: relative 以创建层叠上下文，确保遮罩层与缩略图同级且定位准确；遮罩层需设 pointer-events: none 或 auto 以控制事件穿透；避免 float 布局，优先用 flex/grid；rgba 背景注意 IE11 兼容性。
浮动缩略图被遮罩层截断怎么办
绝对定位的遮罩层 .overlay 没生效，或者只盖住一半，本质是 z-index 生效前提被破坏了：父容器没形成新的层叠上下文，导致子元素的 z-index 彼此不可比。
- 给浮动缩略图的直接父容器（比如
.thumbnail-wrapper）加position: relative，这是最常漏掉的一步 - 确保遮罩层和缩略图同级，且都位于该相对定位容器内；不要把遮罩层写在缩略图内部或外部无关节点下
-
z-index只对定位元素（position为relative/absolute/fixed）有效，纯float元素不参与层叠顺序计算
遮罩层无法响应 hover 交互
遮罩层盖住了缩略图，但鼠标移上去没反应——不是 JS 绑错事件，而是 CSS 的 pointer-events 默认阻断了穿透。
- 如果需要点击缩略图本身（比如跳转），给遮罩层加
pointer-events: none，让鼠标事件透下去 - 如果遮罩层自己要响应 hover（比如显示文字、淡入），则必须设
pointer-events: auto（默认值），同时确保它没有被父级pointer-events: none继承 - 注意 Safari 旧版本对
pointer-events在svg或伪元素上的支持不一致，纯 CSS 遮罩建议用div实现
浮动布局下遮罩层尺寸错位
缩略图用 float: left 排列，遮罩层宽高却按父容器整行计算，盖偏了——因为浮动元素已脱离文档流，position: absolute 的 top/left 计算基准不再是缩略图本身。
- 遮罩层必须和缩略图同级，并放在同一个
position: relative容器里，才能以该容器为定位参考系 - 不要依赖
float布局做主结构；现代做法是用display: flex或display: grid替代，遮罩层定位更可控 - 若必须兼容老浏览器，可用
display: inline-block+vertical-align: top替代float，避免脱离文档流带来的定位偏差
遮罩层透明度与背景色混合出错
用了 background: rgba(0,0,0,0.6)，但实际看起来太黑或发灰——不是颜色值问题，是父容器有 background-image 或其他半透明层叠加干扰。
立即学习“前端免费学习笔记（深入）”；
- 遮罩层尽量用纯色
rgba，避免嵌套多层透明背景；CSS 透明度不叠加，但视觉上会因层叠产生误解 - 如果缩略图是
img标签，注意其object-fit和父容器宽高是否一致，否则遮罩层尺寸匹配不上 - IE11 不支持
rgba()在 background 中的 alpha 通道（会降级为不透明黑），需提供filter: alpha(opacity=60)回退，但仅限于 IE
遮罩层看着简单，真正卡住人的永远是那层看不见的层叠上下文和定位参考系。改完 position: relative 和 z-index 组合后，记得清掉浏览器缓存再试——CSS 层叠规则不会骗人，但缓存里的旧渲染结果会。
