如何在不使用position:absolute的情况下将一个div叠加到另一个div上？

Question

我有两个div有两个图像:

<div id="div1">    

     <div id="div2">
         <img src="img1" />
    </div> 

    <img src="img2" /> 

</div>

第二个是比第一个小的一个.如何在不使用的情况下将第二张图像放在第一张图像上

#div2{
    position: absolute;
}

我需要获得类似的结果但不使用position绝对属性;

主要问题是在父div中有很多其他元素,而不仅仅是div2.

Answer 1

负利润

您可以使用负边距做很多事情.我创建了一个只有两个没有任何div的图像的例子.

img {
    display: block;
}
.small {
    margin: -202px 0 0 0;
    border: 1px solid #fff;
}
.small.top {
    position: relative;
    margin: 0 0 -202px 0;
}

<img src="http://www.lorempixel.com/300/300">
<img class="small" src="http://www.lorempixel.com/200/200">
And some text
<img class="small top" src="http://www.lorempixel.com/200/200">
<img src="http://www.lorempixel.com/300/300">
And some more text

Answer 2

我的问题是你为什么要这样做而没有

#div2 {
    position: absolute;
}

如果您遇到的问题是因为它对页面而言是绝对的而不是div,那么请确保#div1具有以下内容:

#div1 {
    position:relative;
}