最直接可靠的方式是父容器设position: relative，两张img设position: absolute并用top/left定位，z-index控制层级；transform适合微调，clip-path用于裁切交集，负margin重叠属不推荐hack。
用 position: absolute 实现图片重叠
两张图片要交叉重叠，最直接可靠的方式是脱离文档流，用 position: absolute 控制各自位置。父容器必须设 position: relative 作为定位上下文，否则 absolute 会往上找最近的定位祖先，容易错位到 body 或意外容器上。
常见错误现象：img 直接加 absolute 却没给父元素设 relative，结果两张图都飞到页面左上角堆叠，或被其他布局挤偏。
- 父容器必须显式设置
position: relative - 两张
img都设position: absolute，再用top/left（或right/bottom）手动调位置 - 想控制谁在上层？用
z-index：数值大的盖在上面，注意它只对定位元素生效 - 别依赖图片原始宽高自动撑开父容器——
absolute元素不占空间，父容器可能高度塌陷为 0
<div style="position: relative; width: 400px; height: 300px;"> @@##@@ @@##@@ </div>
用 transform 做微调，避免布局干扰
如果只是轻微交叉（比如第二张图右下角压第一张图左上角），用 transform: translate() 比改 top/left 更安全——它不触发重排，只做视觉位移，不影响其他元素布局，也不会让父容器尺寸计算出错。
使用场景：已有正常文档流图片，不想动结构，只加一点“压角”效果；或者响应式中需要保持相对位置关系。
-
transform的偏移是相对于自身原位置，不是父容器边界，更直观 - 和
position: absolute混用时，transform优先级更高，可覆盖top/left - 注意：
transform不影响z-index层级，该设还得设 - 旧版 Safari 对
transform渲染有细微偏移，如需像素级精准，优先用top/left
clip-path 裁出交叉区域（进阶需求）
如果“重叠交叉”不只是视觉堆叠，而是要裁切出特定交集形状（比如只显示两张图重合的部分），就得用 clip-path。但它不直接支持两张图的布尔运算，得靠 SVG <clippath></clippath> 或 CSS 的 path() 手动描边。
性能影响明显：复杂 clip-path 在滚动或动画中易掉帧，尤其移动端。兼容性也要留意——clip-path: path() 在 Safari 15.4+ 才稳定支持。
- 简单圆形/椭圆裁切可用
clip-path: circle(50px at 100px 100px) - 真要按交叉轮廓裁，推荐用 SVG
<clippath></clippath>引入，可控性更强 - 别对大图直接上
clip-path动画，浏览器不会硬件加速，卡顿明显
Flex/Grid 容器里强行重叠的隐患
有人试过把两张图放进 display: flex 或 grid 容器，然后用负 margin 拉过去重叠。这看似省事，但实际问题一堆：负边距破坏语义流、响应式断点易错乱、屏幕阅读器识别困难、打印样式完全失效。
兼容性倒不是大问题，但维护成本高——下次加个标题或按钮，整个重叠逻辑就可能崩。
- 负
margin是 hack，不是布局方案 - Flex/Grid 的初衷是有序排列，硬掰成重叠，等于用锤子拧螺丝
- 一旦容器加了
overflow: hidden，负边距部分会被截掉，而absolute不会
真正难的不是让两张图叠在一起，而是叠得稳、调得准、换图不崩、缩放不歪、读屏能理解。这些细节堆起来，才决定最后是不是“能用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
