動的コンテンツの絶対位置

Question

私は動的なコメントリストボックスを持っています。各コメントボックスには、角の上にバッジアイコンを表示する必要があります。絶対位置でcssを使ってこのアイコンを設定します。しかし、実際には、各ボックスのバッジアイコンを見ることはできません。 e.x：結果が10 commentsでPHPのプリントが10 divの場合、バッジのアイコンが重なっているので1つのバッジが表示されます。この問題は、次の理由によるものです。iはtopとrightをCSSに設定し、すべてのバッジアイコン（10）を1行に表示します。どのように動的なconentに絶対的な位置を示すために？おかげ

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

絶対配置されているアイテムは、相対的または絶対的な配置（または固定されている最も近い親コンテナに対してそれほど相対あろうあまりにも私は思います）。