图像和按钮位于 div 内。如何使用图像右上 Angular 的按钮使图像占据整个 div?
这是包含两个按钮和一个图像的 div。如何将两个按钮放在图像的右上 Angular ?
我试图做 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>
最佳答案
使用如下所示的相对和绝对来达到预期的效果。
P.S:我使用 T 和 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>
关于html - 如何在图片的右上角放置按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54069360/