如何在 HTML 中进行图片叠加（类似于谷歌地图顶部的标记）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/100376/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to do picture overlay in HTML (something like marker on top of google map)?
提问by smalldream
Anyone know how to do picture overlay or appear on top of each other in HTML? The effect will be something like the marker/icon appear on Google Map where the user can specify the coordinate of the second picture appear on the first picture.
任何人都知道如何在 HTML 中进行图片叠加或显示在彼此之上？效果将类似于 Google 地图上出现的标记/图标，用户可以在其中指定第二张图片出现在第一张图片上的坐标。
Thanks.
谢谢。
回答by Johannes H?drich
You can use <div>containers to seperate content into multiple layers. Therefore the div containers have to be positioned absolutely and marked with a z-index. for instance:
您可以使用<div>容器将内容分成多个层。因此 div 容器必须绝对定位并用 z-index 标记。例如：
<div style="position: absolute; z-index:100">This is in background</div>
<div style="position: absolute; z-index:5000">This is in foreground</div>
Of course the content also can contains images, etc.
当然内容也可以包含图片等。
回答by Subimage
Use a DIV tag and CSS absolute positioning, with the z-index property.
使用带有 z-index 属性的 DIV 标签和 CSS 绝对定位。
