html - 使用 CSS 在图像上显示图像：位置标签查询

Question

我创建了一个代码来在图像上显示图像。继承人的代码：

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

现在我在一篇文章中将此添加到我的博客网站。图像似乎与屏幕一起定位。这些图像一个接一个地出现，但即使在我想让它们出现的位置添加了代码之后，它们也位于屏幕的最左角。我想让它们出现在我帖子中的一些文本下方。我认为位置标签的“绝对”值存在一些问题。但我不知道如何克服这一点。

Answer 1

将它们嵌套在一个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>

http://jsfiddle.net/nUPsh/1/

---

这篇文章position很好地解释了 CSS 属性：

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 2

使用一个图像作为 span 的背景可以使其具有响应性。因为它不依赖于首先对容器盒进行成像。

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