Css 动态内容的绝对位置

我有动态评论列表框。在每个评论框中，我需要在角落顶部显示徽章图标。我使用带有绝对位置的css设置此图标。但在表演中，我看不到每个盒子的徽章图标。e、 x：如果结果

10条评论

和php打印

10div

，我会看到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> 

绝对定位的项目相对于最近的父容器是相对的或绝对的（我想也是固定的）

绝对定位的项目相对于最近的父容器是相对的或绝对的（我想也是固定的）

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

.commentbox{
    position: relative;
}