css - 如何在不使用位置的情况下将一个 div 覆盖在另一个 div 上：绝对？

Question

我有两个带有两个图像的 div：

<div id="div1">    

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

    <img src="img2" /> 

</div>

第二个比第一个小一些。如何在不使用的情况下将第二张图片放在第一张图片上

#div2{
    position: absolute;
}

我需要得到类似的结果，但不使用绝对位置属性；

主要问题是在父 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;
}

Answer 3

你可以嵌套div2在里面div1：

<div id="div1">
    <img src="\img1.png" />

    <div id="div2">
        <img src="\img1.png" />
    </div>

</div>

Answer 4

它不是使用负边距的好方法。特别是在电子邮件模板时，gmail 拒绝负边距和头寸。所以另一种方法是

    <div class='wrapDiv'  style='width: 255px;'>
           <div class='divToComeUp' style='
                    float: left;
                    margin-top: 149px; width:100%;'>This text comes above the .innerDiv  
according to the amount of margin-top that you give</div>

           <div class='innerDiv' style='width:100%; height:600px'>
               Inner div Content
           </div>

    </div>