Html 使用 CSS 在图像上显示图像：位置标签查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13534233/
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
Using CSS to display image over image: Position tags query
提问by Hasan
I have created a code to display an image over an image. heres the code:
我创建了一个代码来在图像上显示图像。继承人的代码：
<style type="text/css">
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; }
.imgB1 { position:absolute; top: 70px; left: 100px; z-index: 3; }
</style>
<img class="imgA1" src="image1.png">
<img class="imgB1" src="image2.png">
Now i added this to my blogger site in a post. The images seems to be positioned with the screen. These images appeared one over another, but even after adding the code where i want to make them appear, they were positioned at extreme left corner of the screen. I want to make them appear below some texts in my post. I think theres some prob in the "absolute" value of position tag. But I don't know how to overcome this.
现在我在帖子中将此添加到我的博客站点。图像似乎与屏幕一起定位。这些图像一个接一个地出现，但即使在我想让它们出现的地方添加了代码之后，它们仍然位于屏幕的最左角。我想让它们出现在我帖子中的一些文本下方。我认为位置标签的“绝对”值存在一些问题。但我不知道如何克服这一点。
回答by Curt
Nest them inside a relativeelement:
将它们嵌套在一个relative元素中：
<style type="text/css">
.container { position:relative; }
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; }
.imgB1 { position:absolute; top: 70px; left: 100px; z-index: 3; }
</style>
<div class="container">
<img class="imgA1" src="image1.png">
<img class="imgB1" src="image2.png">
</div>
This article explains the CSS positionproperty quite well:
这篇文章position很好地解释了 CSS属性：
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
回答by ganji
Using one image as a background of a span can make it responsive . Because it is not depended to first image an the container box.
使用一张图像作为跨度的背景可以使其具有响应性。因为它不依赖于首先对容器盒进行成像。
<style type="text/css">
.container { position:relative; }
.imgB1{
position: absolute;
top: 0;
left: 0;
width: 78px;
height: 78px;
overflow: hidden;
text-indent: -999px;
background: url(../images/imgB1.png) no-repeat;
}
</style>
<div class="container">
<img src="image1.png">
<span class="imgB1">Sale</span>
</div>
