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.

Melosa

Its not possible to set the background on the div, and then place an image inside the div with the background? – Deboer

It doesn't meter how will I put the background for div. I need to position them like on example, but without using position: absolute for any of divs. – Melosa

@meep: that's a clever way as well yes. – Haunting

@DmytroTsiniavsky: What's wrong with absolute positioning? What's the main reason you don't want to use it? We may help you with that as well. – Haunting

Answer 1

Negative margins

You can do lots with negative margins. I've created an example with just two images without any divs.

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

Haunting

@DmytroTsiniavsky: I've updated my example with one image overlapping at the bottom and the other at the top if you need to position it on a particular place. – Haunting

Robert Koritnik's Negative Margins answer was excellent and sorted a complex condition I had a horizontal menu who's initial li used a border-bottom:4px to create a custom client requested effect. But onHover it moved background underlying elements. Negative margin-bottom solved the problem perfectly! Many thanks. – Blunger

This is only viable if the contained element is the same size or smaller than its parent. Otherwise it will stretch its parent. – Boxcar

OMG. thank you so much. Using a mailing program that uses HTML to set up printing postage for envelopes. It cannot deal properly with absolute and relative positioning, so the only way for me to put items on top of other items is with this. – Nationalism

Answer 2

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;
}

Remonaremonetize

No, that wasn't the problem, but, nevertheless, +1 for reply. – Melosa

Answer 3

Its not a good approach to use negative margins. Especially when email templating, gmail reject negative margin and positions. So another way is

    <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>

Goodoh

Doesn't work for me. Could you share another example please? – Barnsley

share your html – Goodoh

Answer 4

You could nest div2 inside div1:

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

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

</div>

Gilles

I'm sorry, but I didn't form my question fully correct at the first time. Divs are already nested. I've edited the question. – Melosa