在HTML5中重疊兩個圖像

Question

即時嘗試重疊到圖像。其中一個隱藏，並在「剪貼庫」部分右圖中選取後顯示。而我得到的其他圖像是從您的瀏覽器上傳它。

我已經使用posiotion：絕對之前重疊兩個圖像，但它不適用於我在這個caes。

<div id="bgcolor"> 
    <img id="thumbnil" style="width:100%; margin-top:10px;" src="" alt="" style="position:absolute;" /> 
    <img id="tiger" src="https://openclipart.org/image/800px/svg_to_png/202300/Blue-surprised-cartoon-smiley.png" height="50" width="50" style="position:absolute;"> 
</div> 

這裏是的jsfiddle代碼：http://jsfiddle.net/xq239ko9/

Answer 1

使含有div有一番風情position:relative;。然後製作圖像position:absolute; top:0; left: 0;。這使得兩個圖像都出現在家長div的相同位置。請注意，父母div將失去它的大小，因爲圖像將放置在文檔流程之外。

另一個備註： - 嘗試爲每個標籤使用一個樣式屬性。 - 嘗試使用display:none;，而不是一個空src屬性 的隱藏圖像 - 嘗試使用width和height樣式屬性，而不是標籤屬性的