怎么把按钮放在图片右上角答案

【问题标题】：how to place button on top right corner of image怎么把按钮放在图片右上角
【发布时间】：2019-01-07 06:18:55
【问题描述】：

图像和按钮位于 div 中。如何让图片占据整个 div，图片右上角有按钮？

这是包含两个按钮和一个图像的 div。如何将两个按钮放在图片的右上角？

我试图做 position:relative;top:25px 但按钮会在图片后面

<div class="image">
    <a href="{{ url('/image/'.$image->id.'/delete') }}">
        <button type="button" class="btn btn-default delete-image-btn pull-right">
            <span class="glyphicon glyphicon-trash"></span>
        </button>
    </a>
    <a href="{{ url('/image/'.$image->id.'/edit') }}">
        <button type="button" class="btn btn-default edit-image-btn pull-right">
             <span class="glyphicon glyphicon-pencil"></span>
         </button>
     </a>
     <img src="{{ $image->image }}" class="img img-responsive full-width">
 </div>

【问题讨论】：

标签： html css

【解决方案1】：

使用如下所示的相对和绝对来达到预期的效果。

P.S：我使用 T 和 P 来表示图标，因为它们在 sn-p 中不可见。

.image {
  position: relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  right: 0;
  z-index: 5;
}

<div class="image">
  <div class="overlay">
    <a href="{{ url('/image/'.$image->id.'/delete') }}">
      <button type="button" class="btn btn-default delete-image-btn pull-right">
          T<span class="glyphicon glyphicon-trash"></span>
      </button>
    </a>
    <a href="{{ url('/image/'.$image->id.'/edit') }}">
      <button type="button" class="btn btn-default edit-image-btn pull-right">
           P<span class="glyphicon glyphicon-pencil"></span>
       </button>
    </a>
  </div>
  <img src="https://picsum.photos/200" class="img img-responsive full-width">
</div>

【讨论】：

我不知道你的设计是什么。但可以肯定的是，如果使用得当，它应该可以工作

【解决方案2】：

虽然有很多方法，但一个简单的解决方案是为按钮提供 z-index 属性。

.delete-image {
z-index :1;
}

【讨论】：

【解决方案3】：

请尝试此代码。像这样使用Position relative 和 absolute：

.image {
  position: relative;
}
.image .delete-image-btn,
.image .edit-image-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.image .edit-image-btn {
  margin-right: 40px;
}

【讨论】：

【解决方案4】：

.image {
  position: relative;
}

.image .actions {
  right: 1em;
  top: 1em;
  display: block;
  position: absolute;
}

.image .actions a {
  display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="image">
  <div class="actions">
    <a href="{{ url('/image/'.$image->id.'/delete') }}">
        <button type="button" class="btn btn-default delete-image-btn pull-right">
            <span class="glyphicon glyphicon-trash"></span>
        </button>
    </a>
    <a href="{{ url('/image/'.$image->id.'/edit') }}">
        <button type="button" class="btn btn-default edit-image-btn pull-right">
             <span class="glyphicon glyphicon-pencil"></span>
         </button>
     </a>
   </div>
   <img src="https://cdn.pixabay.com/photo/2013/07/12/17/47/test-pattern-152459_960_720.png" class="img img-responsive full-width">
 </div>

【讨论】：