Question

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

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

Answer 1

相对于容器的相对位置，以及图像上的绝对位置：

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

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/

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

Answer 3

<style>
.imageoverlap{

position: absolute;
top:100px;

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

试试：D

Answer 4

如果将位置设置为绝对位置，则可以控制放置位置。

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

使2个图像重叠

4 个答案: