CSS 右上角图标

Question

我有一个显示所有用户评论的循环。我试图在每条评论的右上角添加一个垃圾桶图标，但它会将所有图标放在一个 div 中的同一位置。我不希望图标改变评论的位置，这就是我使用绝对位置的原因，但它不起作用。

循环代码:

<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/