HTML5无图层概念，图片叠加依赖CSS的position、z-index与堆叠上下文；常用绝对定位+父相对定位+z-index控制顺序；Grid/Flex适合响应式布局；Canvas适用于动态合成；需警惕stacking context误创建导致z-index失效。
HTML5 本身没有“图层”这个概念，所谓“图片叠加”本质是利用 CSS 的 position、z-index 和容器堆叠上下文（stacking context）控制多个 <img alt="html5如何实现图片叠加_html5多图层叠加教程【步骤】" > 元素的绘制顺序。关键不在 HTML5 新特性，而在 DOM 结构 + CSS 渲染规则的配合。
用绝对定位 + z-index 控制图片堆叠顺序
这是最常用、兼容性最好、语义最清晰的方式。父容器设为 position: relative，子图片设为 position: absolute，再用 z-index 显式声明层级。
注意点：
-
z-index只对定位元素（position值为relative、absolute、fixed或sticky）生效 - 同一 stacking context 内，
z-index数值大的在上；若未设z-index，按 DOM 流顺序，后出现的覆盖先出现的 - 避免滥用大数值（如
z-index: 9999），容易引发维护冲突
<div style="position: relative; width: 400px; height: 300px;"> <img src="bg.jpg" style="max-width:90%" alt="html5如何实现图片叠加_html5多图层叠加教程【步骤】" > <img src="logo.png" style="max-width:90%" alt="html5如何实现图片叠加_html5多图层叠加教程【步骤】" > <img src="badge.svg" style="max-width:90%" alt="html5如何实现图片叠加_html5多图层叠加教程【步骤】" > </div>
用 CSS Grid 或 Flex 实现响应式叠加布局
当需要图片随视口缩放、对齐或自适应定位时，Grid/Flex 比纯绝对定位更可控，尤其适合现代响应式场景。
立即学习“前端免费学习笔记（深入）”；
常见做法：
- 父容器设
display: grid，所有子<img alt="html5如何实现图片叠加_html5多图层叠加教程【步骤】" >默认占据同一网格区域（如grid-area: 1 / 1 / -1 / -1） - 用
justify-self/align-self单独调整某张图的位置 - 仍需配合
z-index控制叠放顺序，Grid 容器会创建新的 stacking context
<div style="display: grid; width: 100%; aspect-ratio: 4/3;"> <img src="photo.jpg" style="max-width:90%" alt="html5如何实现图片叠加_html5多图层叠加教程【步骤】" > <img src="watermark.png" style="max-width:90%" alt="html5如何实现图片叠加_html5多图层叠加教程【步骤】" > </div>
Canvas 绘制叠加（适合动态合成或像素级控制）
如果叠加逻辑复杂（比如实时滤镜、透明度混合、坐标变换），或者要导出为单张图，<canvas></canvas> 是更底层的选择。它不依赖 DOM 层叠，而是通过 drawImage() 的调用顺序和参数控制绘制层级。
要点：
- 先
drawImage()的图在底层，后调用的在上层 - 可用
globalAlpha控制透明度，globalCompositeOperation改变混合模式（如"overlay"、"multiply"） - 注意 canvas 像素比（
window.devicePixelRatio），否则高清屏下模糊
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 先画背景
ctx.drawImage(bgImg, 0, 0);
// 再画前景（自动盖在上面）
ctx.globalAlpha = 0.8;
ctx.drawImage(fgImg, 50, 50);
常见错误：图片没叠上去，反而错位或消失
多数问题出在 stacking context 被意外创建，导致 z-index 失效或作用域受限。
典型诱因：
- 父容器有
opacity 、<code>transform、filter、will-change等属性 → 自动创建新 stacking context，子元素的z-index只在该 context 内有效 - 图片未设置宽高，又没内容撑开父容器 → 绝对定位后“看不见”，其实是位置正确但父容器高度为 0
- 使用了
background-image混合图片，误以为是“叠加”，实则无法单独控制每张图的尺寸/透明度/事件
调试建议：用浏览器开发者工具检查元素 computed 样式里的 z-index 是否生效，以及“Layers”面板看实际渲染层结构。
