HTML图片层叠布局是一种非常有用的技术，它可以让我们轻松地创建多层叠放的图片布局。以下是如何使用HTML代码实现图片层叠布局：

<div class="wrapper">
  <img src="img1.jpg" class="bottom">
  <img src="img2.jpg" class="middle">
  <img src="img3.jpg" class="top">
</div>

在上面的代码中，我们使用了<div>标签来创建一个包含所有图片的容器。然后，我们在该容器中定义了三个不同的<img>元素，每个元素都有不同的类名：bottom、middle和top。这些类名将帮助我们在CSS中对每个元素进行定位和叠放。

接下来，我们需要使用CSS来创建层叠布局。以下是样式代码：

.wrapper {
  position: relative;
  width: 500px;
  height: 500px;
}

.bottom {
  position: absolute;
  bottom: 0;
  z-index: 1;
}

.middle {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 2;
}

.top {
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 3;
}

在CSS中，我们通过设置每个元素的位置和z-index属性来创建层叠效果。我们将最底层的图片定位在容器的底部，并将其z-index属性设置为1。然后，我们将中间层的图片定位在容器的中间，并将其z-index属性设置为2。最后，我们定位最上层的图片在容器的顶部，并将其z-index属性设置为3。这将使最上层的图片始终显示在最前面。

总体而言，HTML图片层叠布局是一种强大的技术，它可以帮助我们创建出令人印象深刻且具有动态效果的图片布局。