make 2 images overlap

Question

Я использую JS для написания HTML-кода, где мне нужно отображать 2 изображения, полностью совпадающих.

Высота и ширина обоих одинаковы. Какие свойства 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, слева: 300px;

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/

Edit: Добавлена ​​ваша функциональность скрыть