使2个图像重叠

Question

我正在使用JS编写HTML代码,我需要显示两个完全重叠的图像.

两者的高度和宽度相同.我可以使用哪些CSS属性来执行此操作？

Answer 1

相对于容器的位置,以及图像上的绝对位置:

所有上述答案都缺少这样一个事实:您需要使用静态以外的东西来定位父元素,否则您将把它们绝对定位到浏览器窗口,我认为您不希望这样做.

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/

编辑:添加了隐藏功能

Answer 2

在此使用 css：

http://jsfiddle.net/zuZxD/

我使用不透明度来显示重叠。