web-dev-qa-db-fra.com

Comment superposer une div sur une autre sans utiliser la position: absolute?

J'ai deux divs avec deux images:

<div id="div1">    

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

    <img src="img2" /> 

</div>

La seconde est plus petite que la première. Comment puis-je mettre une deuxième image sur la première image sans utiliser

#div2{
    position: absolute;
}

J'ai besoin d'obtenir similaire résultat mais sans utiliser la propriété absolue de position;

Le problème principal est qu'il y a beaucoup d'autres éléments, dans div parent, pas seulement div2.

cssoverlaycss-positionmargin
12
Dmytro

Marges négatives

Vous pouvez faire beaucoup avec des marges négatives. J'ai créé un exemple avec seulement deux images sans 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

18
Robert Koritnik

Ma question est la suivante: pourquoi devez-vous faire cela SANS

#div2 {
    position: absolute;
}

Si le problème que vous rencontrez est dû au fait qu'il est absolu pour la page et non pour la div, assurez-vous que # div1 présente les éléments suivants:

#div1 {
    position:relative;
}
7
Andy

Vous pouvez imbriquer div2 dans div1:

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

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

</div>
2
Kevin Boucher

Ce n'est pas une bonne approche d'utiliser des marges négatives. Surtout lorsque vous utilisez des modèles de courrier électronique, Gmail rejette les positions et les marges négatives. Donc, une autre façon est

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