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

Question

我想将图像堆叠相对于它们所在的div元素。

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

使用示例代码（none 个图像属于我）： 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%;
}

Answer 1

如果您知道图片尺寸，可以给它们负 top 值；

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

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

或者你可以给你的 .container div 一个固定的高度并将狗设置为 position: absolute;

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

How to place images on top of each other relative to a div element?

stack

image

z-index