如何相对于div元素将图像放置在彼此之上？

Question

我要相对于div元素彼此叠置。[]我见过的所有已回答问题仅是堆栈元素

在空白页上。我的图像需要保留在这个div容器标签中

，因此将我的位置设置为绝对值在这里不起作用。要使用的示例代码（所有图像都不属于我）：https://jsfiddle.net/Jonjei/3qymLn8v/4/

也欢迎任何其他一般性建议或技巧。

HTML

<!-- images are placeholders and belong to their respective owners -->
<div class="container">

<img class="dog1" src="https://is3-ssl.mzstatic.com/image/thumb/Purple5/v4/da/83/ae/da83ae00-d126-1200-1588-c74c59aa1a38/source/256x256bb.jpg" alt="">

<img class="dog2" src="https://www.petmd.com/sites/default/files/petmd-puppy-weight.jpg" alt="">

<img class="dog3" src="https://vetstreet-brightspot.s3.amazonaws.com/56/d831705c9f11e19be6005056ad4734/file/puppy_training-tips-335mk022012-200454626-001.jpg" alt="">

</div>

CSS
.dog1 {
    position: relative;
    top: 0;
    left: 0;
    z-index: auto;
}

.dog2 {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
}

.dog3 {
  position: relative;
    top: 0px;
    left: 0px;
    z-index: 2;
}

.container {
    background-color: #afbed8;
    border: 5px transparent solid;
    border-radius: 2px;
    margin: 2% 10% 2% 10%;
    padding: 0px 7% 0px 7%;
}

我想相对于它们所在的div元素将图像堆叠在一起。我看到的所有已回答问题仅在空白页面上堆叠元素。我的图像需要保留在这个div中...

Answer 1

如果知道图像大小，则可以给它们负的top值；

.dog2 {
    position: relative;
    top: -260px;
    left: 0px;
    z-index: 1;
}

.dog3 {
  position: relative;
    top: -619px;
    left: 0px;
    z-index: 2;
}