2つの画像が重複するようにする

Question

JSを使用して、2つの画像を正確に重ねて表示する必要があるHTMLコードを記述しています。

両方の高さと幅は同じです。 これを行うにはどのCSSプロパティを使用できますか？

Answer 1

はこの中で、CSSの周り再生：

http://jsfiddle.net/zuZxD/

を私は重複を表示するために不透明度を使用していました。

Answer 2

<style> 
.imageoverlap{ 

position: absolute; 
top:100px; 

} 
</style> 
... 
<div class='imageoverlap'> 
image1 
</div> 
<div class='imageoverlap'> 
image2 
</div> 

それを試してみてください：D

Answer 3

位置を絶対に設定すると、配置する場所を制御できます。

<style> 
    #overlay{position:absolute; top:0px;} 
</style> 

<div id="layer1"><img src="img1.png"></div> 
<div id="overlay"><img src="overlay_image.png"></div> 

今、あなたはあなたがそれをしたい場所、すなわち、トップ、トップと左の位置を設定することで、#overlayを配置する必要があります。0PXは、左：300ピクセルを。

Answer 4

ポジションコンテナの相対的な、および画像上の絶対：

上記の答えのすべては、あなたが静的以外のもので、親要素を配置する必要があるという事実が欠落しているか、あるいはあなたがそれらを配置します私はあなたがしたくないと思うブラウザウィンドウに絶対的です。

position: absoluteは、最も近い親のコンテナ内でポジショニングを行います。だから親のposition:relative;にトップまたはボトムを宣言せずに、このようにして通常どおりに0pxになります（つまり、変更はありませんが、まだpositionが宣言されています）。

<div id="container"> 
    <img src="data:image/png;base64,R0lGODlhAQABAPAAAC+byy+byywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;"> 
    <img class="hide" src="data:image/png;base64,R0lGODlhAQABAPAAADCQIzCQIywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;"> 
</div> 

#container{ 
    position:relative; 
} 
#container img{ 
    position:absolute; 
    top:0; 
    left:0; 
} 
.hide:hover{ 
    opacity:0; 
}​ 

http://jsfiddle.net/BLbhJ/1/

編集：