在Javascript中放置图像的另一幅图像

Question

我使用javascript。我面临着一个问题，即我想在另一张图片上放置图片。我的代码如下：

<div> 
    <img src="1.jpg" style="z-index:1;"/> 
    <img src="2.png" style="z-index:2; left:-100px;"/> 
</div> 

问题是，当我运行的代码它把图像上的DIV的右下角，但在图像上。 任何帮助，将不胜感激。

Answer 1

Working DEMO

使用position: absolute在CSS：

img { position:absolute; } 

<div> 
    <img src="1.jpg"/> 
    <img src="2.png"/> 
</div> 

注意：您不需要指定z-index，如果你想最后一个图像出现在顶部。这是默认的浏览器行为。

Answer 2

您需要将位置属性添加到图像样式，例如， - >

position:relative 

https://developer.mozilla.org/en-US/docs/CSS/position

而且，这不是JavaScript的，它的CSS

Answer 3

<div> 
    <img src="1.jpg" /> 
    <img src="2.png" style=" left:-100px; position:relative"/> 
</div> 

Answer 4

尝试：

<div style="position:relative"> 
    <img src="1.jpg" style="z-index:1;"/> 
    <img src="2.png" style="z-index:2; position:absolute;top:0;left:0;"/> 
</div>