CSS top right icon - css

Question

I have a loop that shows all the users comments. I'm trying to add a trash icon on the top-right of each comment, but it's putting all the icons at the same place in one div. I don't want the icon to change the position of the comments and that's why I did position absolute, but it's not working.
Loop code:
<div class="col-md-5 all">
<div class="col-md-12 hello">
#foreach($comment as $comments)
#if($comments->image_id == $image->id)
<div id="{{$comments->id}}" class="ajaxrules">
<div class="col-md-2">
<img src="{{$comments->user_avatar}}" class="img-circle buddy">
</div>
<div class="col-md-10">
<h4>{!! $image->user_name !!}</h4>
<p class="left">{!!$comments->body!!} </p>
</div>
<div class="deletecomment">
<i class="fa fa-trash-o"></i>
</div>
</div>
#endif
#endforeach
<div class="addavatar">
</div>
</div>
</div>
css:
.deletecomment{
display: block;
position: absolute;
top: 0;
right: 0;
clear:both;
}
.addavatar, .ajaxrules{
padding-right: 60px;
padding-top: 10px;
}

Answer 1

You need to add position: relative
to .ajaxrules
So the trash icon will be absolute to it's parent
Edit: adding additional information on position absolute/relative
https://css-tricks.com/absolute-positioning-inside-relative-positioning/