动态内容的绝对位置

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

即绝对定位的项将如此相对于被相对或绝对定位（或固定最接近父容器是我想也是）。