Html 如何将按钮放置在图像的右上角

图像和按钮位于一个div内。如何使图像在图像右上角的按钮占据整个div

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

我试着做位置：相对；顶部：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>

image}“class=”img-img-responsive-full-width“>

尽管有很多方法，但一个简单的解决方案是为按钮提供一个z索引属性

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

---

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

备注：我用T和p来表示图标，因为它们在代码段中不可见。

.image{
位置：相对位置；
显示：内联块；
}
.覆盖{
位置：绝对位置；
右：0；
z指数：5；
}

---

请尝试此代码。使用

位置

相对和绝对，如下所示：

.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;
}

.image{
位置：相对位置；
}
.形象.行动{
右：1em；
顶部：1米；
显示：块；
位置：绝对位置；
}
.形象.行动{
显示：内联块；
}

---

我不知道你的设计是什么。但是，如果使用正确，它肯定能工作