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

Question

图片和按钮都在一个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>

- unknown

Answer 1

使用如下所示的相对和绝对路径来实现所需的效果。

P.S: I have used T and P to denote the icons as they were not visible in the snippet.

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

- Nandita Sharma

---

我不知道你的设计是什么，但是如果正确使用，它应该可以工作。 - Nandita Sharma

Answer 2

请尝试以下代码。使用Position相对和绝对定位，如下所示：

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

- Joykal Infotech

Answer 3

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

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

- Rohan Agarwal

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

- Kordonme