父容器必须设 position: relative，图片才相对其定位；统一设 top: 0、left: 0 并用 z-index 控制层级；滚动行为由父容器的 overflow 和高度决定，非图片自身；clip-path 或 mask-image 比 js 监听 scroll 更高效。
用 position: absolute 叠图片，但别忘了父容器要 position: relative
直接套 position: absolute 到每个 <img alt="如何用html把几张图片叠在一起且滚动" > 上，图片会脱离文档流叠在一起——但前提是它们的**最近定位祖先**得是 position: relative（或 absolute/fixed）的容器。否则所有图片都会相对于 body 叠，一滚动就错位。
常见错误现象：top: 0; left: 0 写了，图片却在页面左上角堆成一团，拖动滚动条时完全不随内容动。
- 父容器必须加
position: relative，哪怕它只是个空<div> <li>每张图统一设 <code>top: 0; left: 0，再用z-index控制上下顺序 - 如果父容器本身会滚动（比如设置了
height+overflow-y: auto），那图片会跟着它一起滚——这才是“滚动时叠在一起”的关键 - 确保父容器有明确高度（如
height: 500px）和overflow-y: scroll或auto - 不要给图片设
position: fixed，否则它会脱离容器、钉死在视口里 - 若想实现“背景图不动、前景图动”的视差效果，得用不同层级的容器分别控制滚动和定位
- 每张图都要有
position属性，z-index才起作用 - 避免在父容器上乱加
transform: translateZ(0)或will-change，容易触发隐式层叠上下文 - 调试时可以用浏览器开发者工具检查元素是否处于同一层叠上下文（看 computed panel 里的
stacking context） - 例如用
clip-path: circle(100px at 50% 50%)把叠在一起的图裁成圆形窗口 - 或用
mask-image: linear-gradient(to bottom, black 60%, transparent 80%)实现滚动渐隐 - 注意
clip-path在 Safari 旧版本需加-webkit-前缀
滚动行为取决于父容器是否可滚动，不是图片自己能滚
图片本身不会滚动；真正滚动的是它的父容器。所谓“图片叠在一起且滚动”，本质是：多个绝对定位图片固定在同一个可滚动容器内，随容器内容一起位移。
使用场景：做带视差效果的 Banner、多层 PNG 贴图滚动、地图瓦片叠加等。
立即学习“前端免费学习笔记（深入）”；
z-index 必须配合定位属性才生效
z-index 在 static 元素上完全无效。很多人写了 z-index: 10 却发现图层没变化，就是因为忘了同时写 position: absolute（或 relative）。
参数差异：z-index 值越大越靠前，但只在同一个“层叠上下文”内比较。如果父容器用了 transform 或 opacity ，可能意外创建新层叠上下文，导致子元素的 <code>z-index 失效。
用 clip-path 或透明度做局部可见，比 JS 计算更轻量
如果目标是“滚动时只显示重叠区域的一部分”（比如圆形裁切、渐变遮罩），别急着用 JS 监听 scroll 算位置——CSS 的 clip-path 或 mask-image 更稳、性能更好。
性能影响：频繁触发 scroll 事件 + 强制同步布局（offsetTop 等）容易卡顿；纯 CSS 方案由 GPU 加速，滚动丝滑。
position 类型和层叠上下文的隐式创建。
