動態內容的絕對位置

Question

我有動態評論列表框。在每個評論框中，我需要在角落頂部顯示徽章圖標。我用絕對位置的CSS設置這個圖標。但在行爲我不能看到每個盒子的徽章圖標。 e.x：如果結果10 comments和php打印10 div，我看到1個徽章，因爲10個徽章圖標重疊。這個問題是因爲：我在css中設置了top和right，並在一行中看到顯示所有徽章圖標（10）。任何方式來顯示絕對位置在動態錐體？感謝

HTML：

<div class="commentbox"> 
<div class="badge"></div> 
<!-- ...... comment description1 --> 
</div> 

<div class="commentbox"> 
<div class="badge"></div> 
<!-- ...... comment description2 --> 
</div> 
<div class="commentbox"> 
<div class="badge"></div> 
<!-- ...... comment description3 --> 
</div> 
<div class="commentbox"> 
<div class="badge"></div> 
<!-- ...... comment description4 --> 
</div> 

CSS：

.badge{position:absolute; background:url(../images/sprite.png) -146px -355px no-repeat; width:30px;height:60px;right:254px; top:124px;} 


NOTE : My Comment box Is dynamic generated. 

Answer 1

.commentbox{ 
    position: relative; 
} 

即絕對定位的項將如此相對於被相對或絕對定位（或固定最接近父容器是我想也是）。