how to place button on top right corner of image

问题: The image and buttons are inside a div. How can i make the image occupy the whole div with buttons on the top right corner on the image? This is the div that contains two...

问题:

The image and buttons are inside a div. How can i make the image occupy the whole div with buttons on the top right corner on the image?

This is the div that contains two buttons and an image. How can i place the two buttons on the top right corner of the image?

enter image description here

I tried to do position:relative;top:25px but the button will behind the image

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

回答1:

Though there are many ways, a simple solution would be to give the buttons a z-index property.

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

回答2:

Use relative and absolute like shown below to achieve the desired effect.

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>


回答3:

Please try this code. Use Position relative and absolute like this:

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

  • 发表于 2019-01-10 01:01
  • 阅读 ( 379 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除