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

Posted 2023-02-16

【中文标题】如何将图标放在图像的左上角。 Vue/CSS

【英文标题】：How can i put the icon on the top left inside of the image. 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 "  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>

这就是我得到的：

【参考方案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 "  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>