Image 如何相对于div元素将图像放置在彼此的顶部？

我想相对于它们所在的div元素将图像堆叠在彼此的顶部

我看到的所有已回答的问题都只在空白页上堆叠元素。我的图像需要保留在此div容器标记中，因此将我的位置设置为绝对位置在此处不起作用

要使用的示例代码（没有一个图像属于我）：

任何其他一般性的建议或提示都是非常受欢迎的

HTML

---

如果你知道你的图像大小，你可以给他们负

top

值

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

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

或者你可以给你的

.container

设定一个固定的高度，并将狗设置为

位置：绝对

.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%;
}

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

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