如何将图标放在图像的左上角。 Vue/CSS答案

【问题标题】：How can i put the icon on the top left inside of the image. Vue / CSS如何将图标放在图像的左上角。 Vue/CSS
【发布时间】：2021-10-24 22:16:58
【问题描述】：

我正在开发一个 vue 项目，我正在尝试在每个图像的左上角制作一排带有图标的图像。

这是我的代码：

<div v-for="(image, index) in images" :key="index" class="d-inline py-5 ">
    <img :src="'/product_images/'+image.image_name" class="m-1 rounded-2 " alt="" style="width: 100px; height: 100px">
    <button class="btn"><i id="icon" class="bi bi-trash-fill text-danger" style="font-size: 22px"></i></button>
</div>

这就是我得到的：

【问题讨论】：

标签： html css twitter-bootstrap vue.js vuejs2

【解决方案1】：

一种简单的方法是在 CSS 中进行绝对定位。这是 TailwindCSS 的示例（请关注this link 进行复制）：

<div class="relative">
  <img src="/img/logo.svg" class="h-7 sm:h-8" />
  <div class="absolute top-0 left-0">Icon</div>
</div>

所以你的代码应该调整为：

<div v-for="(image, index) in images" :key="index" class="d-inline py-5" style="position: relative">
    <img :src="'/product_images/'+image.image_name" class="m-1 rounded-2 " alt="" style="width: 100px; height: 100px">
    <button class="btn"><i id="icon" class="bi bi-trash-fill text-danger" style="font-size: 22px; position: absolute; top: 0; left: 0"></i></button>
</div>

您可以随意调整 CSS 属性 top、bottom、left 和 right 以满足您的需求。

【讨论】：

不，z-index 只控制元素的z轴水平。 z-index 很有用，如果您想将 div 放在代码中的 image 上方。

【解决方案2】：

这不是 vue 特定的要求。它只是简单的 CSS。

您需要将您的button（删除图标）绝对相对于包装器（包含图像和按钮）

见下例

.wrapper {
    position:relative
}
button {
   position:absolute;
   top:0;
   left:0;
}

<div class="wrapper">
   <img src="https://via.placeholder.com/150" />
   <button>
      Delete
   </button>
</div>

【讨论】：