Jquery 对于所有浏览器，让一个图像在html页面上重叠的最佳方式是什么

我有两个跨度：

<span id="top" ><img src="top.png" /></span>
<span id="bottom" ><img src="bottom.png" /></span>

<span id="top" ><img src="top.png" /></span>
<span id="bottom" ><img src="bottom.png" /></span>

我如何在以下位置使用它：

顶部图像与底部图像重叠

确保顶部图像显示在底部图像的前面（而不是后面）

确保跨浏览器的对齐一致

---

@ooo；您可以将

position:relative

指定给span，因为

z-index

仅适用于

position absolute&relative

右侧，如下所示：

css:

html:

---

这应该有点重叠。CSS实际上取决于它们应该重叠多少

将元素包装在容器中

<div id="image-container">
    <span id="top" ><img src="top.png" /></span>
    <span id="bottom" ><img src="bottom.png" /></span>
</div>

使用

left

和

top

定位图像

这将在不同浏览器中提供最一致的结果。与使用边距来定位图像相比，它应该特别受青睐，因为在早期版本的IE中，元素可能容易受到双边距错误的影响

span { position:relative;display:block; }
#bottom { z-index: 1;margin-top:-10px; }
#top { z-index: 2; }

<div id="image-container">
    <span id="top" ><img src="top.png" /></span>
    <span id="bottom" ><img src="bottom.png" /></span>
</div>

#top {
  position: absolute;
  z-index: 2;
}
#bottom{
  position: absolute;
  z-index: 1;
}