Как наложить один div на другой div без использования позиции: абсолютный?

У меня есть два div с двумя изображениями:

<div id="div1">    

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

    <img src="img2" /> 

</div>

Второй из них немного меньше первого. Как я могу поместить второе изображение на первое изображение без использования

#div2{
    position: absolute;
}

Мне нужно получить аналогичный результат, но без использования абсолютного свойства позиции;

Основная проблема заключается в том, что в родительском div не так много других элементов, а не только div2.

Ответ 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

Ответ 2

Мой вопрос к вам, почему вы должны делать это БЕЗ

#div2 {
    position: absolute;
}

Если проблема, с которой вы сталкиваетесь, состоит в том, что она абсолютна для страницы, а не для div, убедитесь, что # div1 имеет следующее:

#div1 {
    position:relative;
}

Ответ 3

Вы можете вставить div2 внутри div1:

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

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

</div>

Ответ 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>