Question

I have dynamic comment list box . in each comment box i need to show badge icon in top of corner. i set this icon using css with absolute position. but in act i cant see badge icon for each box. e.x : if result 10 comments and php print 10 div, i see 1 badge because 10 badge icon overlapping . this problem because : i set top and right in css and see show all badge icon( 10 ) in one line . any way to show absolute position in dynamic conent ? thanks

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

An item that is absolutely positioned will be so relative to the closest parent container that is positioned relative or absolute (or fixed too I suppose).