html - 使2张图像重叠

Question

我正在使用 JS 编写 HTML 代码，我需要显示 2 张完全重叠的图像。

两者的高度和宽度相同。我可以使用哪些 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/

编辑:添加隐藏功能