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

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

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

Tags:

Css

Overlay

Margin

Css Position

Related