absolute Position für dynamischen Inhalt

Question

Ich habe dynamische Kommentar Listbox. In jedem Kommentarfeld muss ich das Abzeichen-Symbol oben in der Ecke anzeigen. Ich setze dieses Icon mit CSS mit absoluter Position. aber in der Tat kann ich Abzeichen-Symbol für jede Box nicht sehen. e.x: Wenn Ergebnis 10 comments und php Drucken 10 div, sehe ich 1 Abzeichen, weil 10 Abzeichen Symbol überlappt. Dieses Problem, weil: ich top und right in css gesetzt habe und zeige alle Abzeichen Symbol (10) in einer Zeile. Irgendeine Möglichkeit absolute Position in dynamischem Zustand zu zeigen? Dank

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

Ein Element, das absolut positioniert ist, wird auf den nächsten übergeordneten Container so relativ sein, die relative oder absolute positioniert ist (oder fest Ich nehme auch an).