Dmytro Tsiniavskyi Dmytro Tsiniavskyi - 1 year ago 73
CSS Question

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

I have two divs with two images:

<div id="div1">

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

<img src="img2" />


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

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 Source

Negative margins

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

<img src="">
<img class="small" src="">
And some text
<img class="small top" src="">
<img src="">
And some more text​


img {
    display: block;
.small {
    margin: -202px 0 0 0;
    border: 1px solid #fff;
} {
    position: relative;
    margin: 0 0 -202px 0;