CSS верхний правый значок

Question

У меня есть цикл, который показывает все комментарии пользователей. Я пытаюсь добавить значок корзины в верхнем правом углу каждого комментария, но он помещает все значки в одно и то же место в одном div. Я не хочу, чтобы значок менял позицию комментариев, и поэтому я занимал абсолютную позицию, но он не работает.

код Loop:

<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

Вам нужно добавить position: relative

в .ajaxrules

Так что значок корзины будет абсолютным его родитель

Редактировать: добавление дополнительной информации о положении абсолютной/относительной

https://css-tricks.com/absolute-positioning-inside-relative-positioning/