对于所有浏览器来说，让一个图像在 html 页面上与另一个图像重叠的最佳方法是什么

Question

我有两个跨度：

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

我怎样才能将它放在哪里：

1. 顶部图像与底部图像重叠
2. 确保顶部图像显示在底部图像的前面（而不是后面）
3. 确保跨浏览器的对齐方式一致

Answer 1

@ooo；您可以将 position:relative 赋予您的范围，因为 z-index 仅适用于 绝对位置和位置相对就像这样：

css：

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

html：

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

Answer 2

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

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

Answer 3

将元素包裹在容器中；

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

将容器的css设置为position:relative;

然后使用;

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

使用 left 和 top 来定位图像。

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