Question

I am trying to use CSS to let multiple pairs of images overlay within their own div. For example, in the following code, I want img2 over img1, and img4 over img3.

<div class="container">
<img class="base" src="img1.jpg">
<img class="overlay" src="img2.jpg">
</div>

<div class="container">
<img class="base" src="img3.jpg">
<img class="overlay" src="img4.jpg">
</div>

我发现的都是这样的:

.base {
  position: absolute;
}
.overlay {
  position: relative;
}

这四幅图像一带。任何帮助都值得赞赏!

Answer 1

您需要根据您的要求,确定<代码>.container 和.base至relative,并设定z-index。类似:

.container {
      position: relative;
      display: inline-block;
    }

    .base {
      position: relative;
      z-index: 1;
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }

友情链接