Wie füge ich ein Bild über ein anderes Bild in HTML für diese Site hinzu?

Question

Ich möchte ein Bild über ein anderes Bild auf dieser Website hinzufügen. Die HTML-Codes finden Sie hier. Es ist bereits eine Reihe von JavaScript-Code vorhanden, die das größere hochgeladene Foto als Leinwand zum Eintippen macht. Jetzt ist das Problem, ich kann nicht scheinen, das kleinere Bild oben auf dem Leinwandfoto zu legen, gerade wie das Hinzufügen von Text darauf.

Ich habe versucht, das grundlegende Bild auf Bildcode, aber ich weiß nicht, wie man den Code richtig passt. Quelle Frage: How do I position one image on top of another in HTML?

<div style="position: relative; left: 0; top: 0;"> 
    <img src="a.jpg" style="position: relative; top: 0; left: 0;"/>  
    <img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/> 
</div> 

Anweisungen, wie es gehen sollte: http://i66.tinypic.com/dokpcp.jpg

HTML-Code für die Site (es funktioniert offline): http://codepen.io/fallonpark/pen/mPwREG

Answer 1

Sie können die Ränder des inneren Bildes definieren, indem die oberen und linken Werte. Wenn beide Bilder die gleiche Breite haben, sollten Sie in der Lage sein, das zu erreichen, was Sie wollen:

<div style="position: relative; left: 0; top: 0;"> 
    <img src="a.jpg" style="position: relative; top: 0; left: 0;"/>  
    <img src="b.jpg" style="position: absolute; top: 50px; left: 0px;"/> 
</div>