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/

CSS右上角的图标

1 个答案: