动态内容的绝对位置

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

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