Dmytro Tsiniavskyi Dmytro Tsiniavskyi - 10 months ago 67
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.


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;