使两张图片重叠

Question

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

两个图像的高度和宽度相同。 我可以使用哪些CSS属性来实现这一点？

- code4fun

---

我正在使用JS编写HTML代码……嗯？ - TimCodes.NET

我很困惑。您正在使用JavaScript创建两个图像元素，希望直接重叠显示？ - MetalFrog

@MetalFrog 当然可以。如果顶部的一个有透明度，你可以透过它看到底部的一些内容！ - Mr Lister

@MrLister 我现在理解这个概念了，只是措辞让我有些困惑。“使用JS编写HTML代码...什么CSS”等。 - MetalFrog

@MrLister 没问题，我只是想确认一下他们需要什么，同时弄清楚自己是否理解得到。我的表述有点含糊。 - MetalFrog

Answer 1

在容器上设置相对定位，图片上设置绝对定位：

所有上述回答都忽略了一个事实，即您需要将父元素与静态位置不同的某些内容结合起来来定位它们，否则您将把它们绝对定位于浏览器窗口，我想您不希望这样做。

position: absolute会在最近具有某种定位的父元素中给出您在容器中的位置。因此，我们给父元素添加 position:relative; ，但不声明top或bottom，这样它就距离正常位置（即没有改变，但仍然声明了position）为0像素。

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

编辑：添加了您的隐藏功能

- Chris Sobolewski

Answer 2

请在这里尝试更改CSS样式：

http://jsfiddle.net/zuZxD/

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

- frontsideup

Answer 3

<style>
.imageoverlap{

position: absolute;
top:100px;

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

试试看 :D

- craighandley

---

你显然会根据需要更改 top 子句，也许还会使用 left 和 right。尝试一下吧。 - craighandley

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，通过设置顶部和左侧位置，例如：top:0px，left:300px;

- Vlad