最稳方式是用position: absolute + z-index；父容器必须设position: relative以提供定位上下文，否则图片会相对于body定位而错位；滚动需父容器设显式高度和overflow，图片用top:0 left:0对齐并靠占位元素撑高。
直接用 position: absolute + z-index 是最稳、兼容性最好、也最容易调试的方式。其他方法（Grid、Flex、Canvas）各有适用场景，但日常网页叠加，90% 的需求靠这组组合就能闭环解决。
为什么父容器必须加 position: relative
因为 position: absolute 的定位参考点是「最近的已定位祖先元素」。如果没设，浏览器会一路向上找，最终落到 <body> 或 <html> 上——图片就飞到页面左上角去了，根本叠不到你想要的位置。
- 父容器加
position: relative不改变自身布局，只创建一个干净的定位上下文 - 不推荐用
position: absolute或position: fixed作父容器，容易引发嵌套错位 - 如果父容器本身需要响应式宽高，记得同时设
width和height（或aspect-ratio），否则绝对定位子元素会让它高度塌陷
z-index 失效的常见原因
写了 z-index 却没反应？大概率是触发了 stacking context（堆叠上下文）——它会把 z-index 的作用范围“截断”在局部。
-
z-index只对position值为relative、absolute、fixed或sticky的元素生效 - 父容器若设置了
opacity小于 1、transform、filter、will-change等属性，会隐式创建新的 stacking context，子元素的z-index只在该上下文内比较 - 避免给不同层级的兄弟容器都设高
z-index（比如 999 和 9999），它们之间不再可比；统一用小整数（z-index: 1、2、3）更可控
滚动区域里图片重叠怎么保高度
想让一堆重叠图片能上下滚动？关键不是怎么叠，而是让父容器「感知内容高度」并允许溢出。默认情况下，position: absolute 元素完全脱离文档流，父容器高度为 0，滚动条压根不会出现。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设显式
height或max-height（不能靠内容撑开） - 加
overflow-y: auto（纵向滚动）或overflow-x: auto（横向滚动），别两个一起开 - 所有图片仍用
position: absolute; top: 0; left: 0对齐，但需靠 JS 或额外 DOM 元素（如占位<div style="height: Xpx"></div>）来撑开父容器高度 - 若图片尺寸不一，建议用
object-fit: contain+ 固定宽高，避免拉伸变形
替代方案：什么时候不该用双 <img> 标签
如果第二张图只是水印、角标、蒙层这类纯装饰性内容，硬塞一个 <img src="..."> 不仅语义混乱，还多一次请求、无法被 CSS 精细控制。
- 改用
background-image：写在同一个<div>的样式里，天然叠加，支持background-size、background-position独立调节 - 伪元素叠加：
::before或::after设background-image，配合position: absolute定位，不污染主 DOM 结构 - 慎用
mix-blend-mode：它依赖父容器无背景色（background-color: transparent）且需isolation: isolate，稍有不慎就全黑或发灰
真正难的从来不是“怎么叠”，而是“叠完之后怎么让它在各种尺寸、滚动、交互、语义要求下依然可靠”。每加一层定位或混合，就多一个 stacking context 或渲染路径，得随时问自己：这个 z-index 真的还在预期上下文里吗？这个 overflow 是被哪个 transform 悄悄禁用了？
