使用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/

---

本文介紹的CSS屬性position很好：

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

Answer 2

用一個形象跨度的背景可以使其響應。 因爲它不依賴於首先對容器盒進行成像。

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