überlagert zwei Bilder mit HTML und CSS, wenn ich jedes andere Overlay versuchen sie widersprüchlich sind?

Question

Ich habe zwei Bilder erfolgreich überschichtet, aber wenn ich das gleiche für andere div Bilder verwenden hier bin immer Konflikt ist der jsfiddle Code .. https://jsfiddle.net/cLew1t2v/ und hier ist der Code

<div > 
    <div style="position:relative;"> 
     <img src="http://getfreedeals.co.in/wp-content/uploads/2012/08/get-Toaster-worth-Rs.350-free-on-purchase-of-Rs.275-worth-of-frying-pan.jpg" style="position:absolute; top: 0px; left: 0px; z-index: 1; "> 
     <img src="http://lh3.ggpht.com/-9_zNrpUMkQo/VMDgzXMlX4I/AAAAAAAAAS8/HY4BkO70fB0/s1600/images.jpeg" style="position:absolute; top: 220px; left: 20px; z-index: 3;"> 

    </div> 
</div> 
<div > 
     <div style="position:relative;"> 
     <img src="http://getfreedeals.co.in/wp-content/uploads/2012/08/get-Toaster-worth-Rs.350-free-on-purchase-of-Rs.275-worth-of-frying-pan.jpg" style="position:absolute; top: 0px; left: 0px; z-index: 1; "> 
     <img src="http://lh3.ggpht.com/-9_zNrpUMkQo/VMDgzXMlX4I/AAAAAAAAAS8/HY4BkO70fB0/s1600/images.jpeg" style="position:absolute; top: 220px; left: 20px; z-index: 3;"> 

    </div> 

</div> 

Answer 1

Da alle Selektoren innerhalb div mit position: relative sind absolut positioniert ist die Höhe 0.

Sie können Breite und Höhe auf relative Box und Float setzen, wenn Sie Inline-Elemente haben möchten.

.relative-box{ 
 
    position:relative; 
 
    height: 350px; 
 
    width: 320px; 
 
    float: left; 
 
    margin: 0 10px; 
 
}

 <div class="relative-box"> 
 
      <img src="http://getfreedeals.co.in/wp-content/uploads/2012/08/get-Toaster-worth-Rs.350-free-on-purchase-of-Rs.275-worth-of-frying-pan.jpg"> 
 
      <img src="http://lh3.ggpht.com/-9_zNrpUMkQo/VMDgzXMlX4I/AAAAAAAAAS8/HY4BkO70fB0/s1600/images.jpeg" style="position:absolute; top: 220px; left: 20px; z-index: 3;"> 
 
      
 
     </div> 
 

 
      <div class="relative-box"> 
 
      <img src="http://getfreedeals.co.in/wp-content/uploads/2012/08/get-Toaster-worth-Rs.350-free-on-purchase-of-Rs.275-worth-of-frying-pan.jpg" > 
 
      <img src="http://lh3.ggpht.com/-9_zNrpUMkQo/VMDgzXMlX4I/AAAAAAAAAS8/HY4BkO70fB0/s1600/images.jpeg" style="position:absolute; top: 220px; left: 20px; z-index: 3;"> 
 
      
 
     </div>

Answer 2

Hier ist eine andere Lösung:

.cont { 
 
    position: relative; 
 
    float: left; 
 
}

<div class="cont"> 
 
      <img src="http://getfreedeals.co.in/wp-content/uploads/2012/08/get-Toaster-worth-Rs.350-free-on-purchase-of-Rs.275-worth-of-frying-pan.jpg" style="top: 0px; left: 0px; z-index: 1; "> 
 
      <img src="http://lh3.ggpht.com/-9_zNrpUMkQo/VMDgzXMlX4I/AAAAAAAAAS8/HY4BkO70fB0/s1600/images.jpeg" style="position:absolute; top: 220px; left: 20px; z-index: 3;"> 
 
</div> 
 
<div class="cont"> 
 
      <img src="http://getfreedeals.co.in/wp-content/uploads/2012/08/get-Toaster-worth-Rs.350-free-on-purchase-of-Rs.275-worth-of-frying-pan.jpg" style="top: 0px; left: 0px; z-index: 1; "> 
 
      <img src="http://lh3.ggpht.com/-9_zNrpUMkQo/VMDgzXMlX4I/AAAAAAAAAS8/HY4BkO70fB0/s1600/images.jpeg" style="position:absolute; top: 220px; left: 20px; z-index: 3;"> 
 
</div>

Sobald .cont links gemacht floating, erstellt es einen neuen Block Formatierung Zusammenhang, so das erste Kind davon wird in der oberen linken Ecke des Containers positioniert, a Und Sie können keine ersten Kinderpositionen definieren.