关键是要让父容器感知绝对定位子元素的高度并支持滚动：父容器需设position: relative、显式height/max-height，子图片用position: absolute + top:0 left:0，滚动方向依需求选overflow-y或overflow-x，z-index用小整数序号控制层级。
用 position: absolute 叠加图片，但必须限制父容器尺寸
图片重叠本身不难，难的是“叠加 + 滚动”同时成立——浏览器默认会把 position: absolute 的元素移出文档流，导致父容器高度塌陷，滚动条消失。所以关键不是怎么叠，而是怎么让父容器“感知到内容高度”，同时允许内部溢出滚动。
常见错误现象：overflow-y: auto 加了没反应；滚动条出现但拉不动；图片只显示左上角一小块。
- 父容器必须设
position: relative（否则绝对定位的图片会相对于 body 定位，跑飞） - 父容器必须显式设置
height或max-height（不能靠内容撑开，否则无法触发滚动） - 所有子图片设
position: absolute，并统一用top: 0; left: 0对齐到左上角 - 若需保留图片原始宽高比例且居中，可用
width: 100%; height: 100%; object-fit: contain
滚动方向选 overflow-y 还是 overflow-x？看图片长宽比
横向滚动还是纵向滚动，取决于你希望用户怎么浏览叠加层。多数场景下，叠加图是同尺寸的，用户想上下滑动看不同图层效果（比如带标注的对比图、多版本 UI 截图），那就用 overflow-y；如果图特别宽（比如长流程示意图），才考虑 overflow-x。
性能影响：开启 overflow 后，浏览器会对溢出区域做裁剪和合成优化，一般无感；但若叠加图很多（>10 张）且含透明通道或滤镜，滚动可能卡顿。
立即学习“前端免费学习笔记（深入）”；
- 纵向滚动：父容器设
max-height: 400px; overflow-y: auto - 横向滚动：父容器设
white-space: nowrap; overflow-x: auto; overflow-y: hidden，子图片加display: inline-block; vertical-align: top - 避免同时开
overflow-x和overflow-y，移动端容易误触双轴滚动，体验差
图片层级顺序由 z-index 控制，但别乱设数值
z-index 只对定位元素（position 不为 static）生效。叠加时，后写的图片默认在上层（HTML 流顺序），但显式设 z-index 更可靠，尤其涉及 JS 动态切换图层时。
容易踩的坑：z-index 值过大（如 9999）或过小（如 -1）反而引发意外遮挡；多个兄弟元素设相同 z-index 时，仍按 HTML 顺序决定谁在上。
- 推荐用小整数：第一张图
z-index: 1，第二张z-index: 2，依此类推 - 不要给所有图片设
z-index: 1——等于没设 - 若某张图要常驻顶层（比如操作控件图），可设
z-index: 10，但需确认它不在其他层的transform或filter创建的新层叠上下文中
移动端滚动卡顿？关掉 transform: translateZ(0) 再试
有些教程建议加 transform: translateZ(0) 强制 GPU 加速，但实际在 iOS Safari 和部分安卓 WebView 中，它会让 position: absolute 元素脱离父容器的滚动裁剪边界，导致图片“溢出可见区还显示”。更稳妥的方式是依赖原生滚动机制。
兼容性提示：iOS 15+ 对 overflow 的支持已很稳定，但老版本（iOS 12–14）对 overflow: auto 在非 -webkit-overflow-scrolling: touch 容器里表现异常——不过这个属性早已废弃，现在直接删掉更安全。
- 删掉所有
transform: translateZ(0)或will-change: transform - 确保父容器没有
contain: paint（会截断子元素渲染） - 如仍卡顿，检查图片是否太大（单张 > 2MB），优先用
srcset或压缩格式（WebP）
scroll 事件 + getBoundingClientRect() 计算可视比例——这已经不是纯 CSS 能解决的事了。 
