machen 2 Bilder überlappen

Question

Ich benutze JS, um HTML-Code zu schreiben, wo ich zwei Bilder genau überlappt anzeigen muss.

Die Höhe und Breite von beiden sind gleich. Welche CSS-Eigenschaften kann ich verwenden, um dies zu tun?

Answer 1

spielen, um mit der CSS in dieser:

http://jsfiddle.net/zuZxD/

I verwendet Opazität die Überlappung angezeigt werden soll.

Answer 2

<style> 
.imageoverlap{ 

position: absolute; 
top:100px; 

} 
</style> 
... 
<div class='imageoverlap'> 
image1 
</div> 
<div class='imageoverlap'> 
image2 
</div> 

bereite: D

Answer 3

Wenn Sie die Position auf absolut festlegen, können Sie steuern, wo Sie sie platzieren möchten.

<style> 
    #overlay{position:absolute; top:0px;} 
</style> 

<div id="layer1"><img src="img1.png"></div> 
<div id="overlay"><img src="overlay_image.png"></div> 

Jetzt müssen Sie #overlay positionieren, wo Sie es möchten, Top-Einstellung und linken Positionen, das heißt top: 0px, links: 300px;

Answer 4

Position relativ zu dem Behälter und absolut auf die Bilder:

Alle oben genannten Antworten fehlen die Tatsache, dass Sie ein übergeordnetes Element mit etwas anderem als statisch positionieren müssen, sonst werden Sie sie positionieren werden Absolut zum Browserfenster, von dem ich annehme, dass Sie nicht möchten.

position: absolute geben Sie Ihre Position im Container des nächsten Elternteils mit einer Art von Positionierung. Also geben wir dem Elternteil position:relative; ohne oben oder unten zu deklarieren, auf diese Weise wird es 0px von wo es normalerweise sein würde (d. H. Keine Änderung, aber immer noch position deklariert).

<div id="container"> 
    <img src="data:image/png;base64,R0lGODlhAQABAPAAAC+byy+byywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;"> 
    <img class="hide" src="data:image/png;base64,R0lGODlhAQABAPAAADCQIzCQIywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;"> 
</div> 

#container{ 
    position:relative; 
} 
#container img{ 
    position:absolute; 
    top:0; 
    left:0; 
} 
.hide:hover{ 
    opacity:0; 
}​ 

http://jsfiddle.net/BLbhJ/1/

Edit: Ihre Haut Funktionalität