在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样式属性，而不是标签属性的