CSS图片叠加与定位主要通过position（relative+absolute）配合z-index、top/left或transform实现；多背景图用background-image逗号分隔；clip-path支持非矩形裁剪叠加。
图片叠加与定位在CSS中主要靠position属性配合z-index、top/left等偏移值来实现，核心是让多个图片处于同一空间层级并精确控制堆叠顺序和位置。
使用relative + absolute实现图片叠加
父容器设为position: relative，子图片用position: absolute脱离文档流，再通过top、left等定位到指定位置。这样所有绝对定位的图片都以父容器为参考点，便于叠加管理。
- 父元素必须有明确高度（或内容撑开），否则absolute子元素可能重叠到外部区域
- 多个absolute图片默认按HTML书写顺序堆叠，后写的在上层；可用
z-index显式控制层级 - 推荐给每个图片设置
z-index值（如10/20/30），避免隐式层叠带来的意外覆盖
用transform微调替代top/left（更流畅）
当需要动画或频繁重绘时，用transform: translate(x, y)代替top/left定位，能触发GPU加速，减少页面回流重绘。
-
transform不影响文档流，也不改变元素的“占位”，适合叠加场景下的精细位移 - 例如：
img.avatar { position: absolute; transform: translate(20px, -15px); } - 注意：
transform的坐标系基于自身左上角，而top/left基于包含块，逻辑一致但性能更好
背景图叠加：多层background-image
单个元素可通过background-image声明多个图片，用逗号分隔，顺序决定堆叠——前面的在上层，后面在下层。
立即学习“前端免费学习笔记（深入）”；
- 配合
background-position、background-size分别控制每层位置和缩放 - 示例：
background: url(logo.png) no-repeat 20px 10px, url(bg-pattern.png) repeat; - 适合静态装饰性叠加（如水印+底纹），不适用于需独立交互或响应式缩放的图片
clip-path + position组合做非矩形叠加
用clip-path裁剪图片形状（如圆形、多边形），再结合position叠加，可实现头像环、徽章角标等效果。
- 例如右上角小图标：
img.badge { position: absolute; top: 8px; right: 8px; clip-path: circle(12px at center); } - 注意浏览器兼容性，现代主流浏览器支持良好，IE不支持
- 与
border-radius不同，clip-path可定义任意路径，更适合创意布局
