web-dev-qa-db-de.com

Wie kann ein Div über ein anderes Div gelegt werden, ohne Position zu verwenden: absolut?

Ich habe zwei Divs mit zwei Bildern:

<div id="div1">    

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

    <img src="img2" /> 

</div>

Der zweite ist etwas kleiner als der erste. Wie kann ich ein zweites Bild auf das erste Bild setzen, ohne es zu verwenden?

#div2{
    position: absolute;
}

Ich muss ähnliches Ergebnis erhalten, aber ohne Position absolute Eigenschaft zu verwenden;

Das Hauptproblem ist, dass es viele andere Elemente gibt, nicht nur div2, sondern auch im übergeordneten div.

12
Dmytro

Negative Margen

Sie können Lots mit negativen Margen erzielen. Ich habe ein Beispiel mit nur zwei Bildern ohne divs erstellt.

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

Meine Frage an Sie lautet: Warum müssen Sie das OHNE tun?

#div2 {
    position: absolute;
}

Wenn das Problem, auf das Sie stoßen, darin besteht, dass es absolut für die Seite und nicht für das div ist, stellen Sie sicher, dass # div1 Folgendes hat:

#div1 {
    position:relative;
}
7
Andy

Sie könnten div2 in div1 verschachteln:

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

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

</div>
2
Kevin Boucher

Es ist kein guter Ansatz, um negative Margen zu nutzen. Insbesondere beim E-Mail-Templating lehnt Google Mail negative Margen und Positionen ab. Ein anderer Weg ist also

    <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