How to overlay one div over another div without using position: absolute?

Question

I have two divs with two images:

<div id="div1">    

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

    <img src="img2" /> 

</div>

Second one is some smaller than first. How can I put second image on first image without using

#div2{
    position: absolute;
}

I need to get similar result but without using position absolute property;

The main issue is that there are a lot of other elements, in parent div, not only div2.

Answer 1

My question to you is why must you do this WITHOUT

#div2 {
    position: absolute;
}

If the problem you are encountering is because it's absolute to the page and not the div then make sure #div1 has the following:

#div1 {
    position:relative;
}