在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>