css - 动态内容的绝对位置

Question

我有动态评论列表框。在每个评论框中，我需要在角落的顶部显示徽章图标。我使用具有绝对位置的 css 设置此图标。但实际上我看不到每个盒子的徽章图标。例如：如果结果10 comments和 php 打印10 div，我看到 1 个徽章，因为 10 个徽章图标重叠。这个问题是因为：我在css中设置top并right看到在一行中显示所有徽章图标（10）。有什么方法可以在动态内容中显示绝对位置？谢谢

网页：

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

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