如何在Vue/CSS中实现图标放置在图片内部左上角

你需要通过CSS定位实现图标固定在图片内部左上角，你用到了Bootstrap工具类，直接调整代码如下即可：

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

调整说明 #

• 父容器将d-inline替换为d-inline-block，同时添加position-relative类：inline元素无法作为绝对定位的参照容器，inline-block可以保持横向排列的同时生成定位上下文
• 按钮添加position-absolute top-0 start-0 z-1类：让按钮脱离正常文档流，默认对齐父容器左上角，z-index确保按钮层级高于图片，显示在上方
• 新增transform: translate(20%, 20%)：让按钮向内偏移避免完全贴边，可根据视觉需求调整偏移值
• 移除了img上的m-1类移到父容器，同时删除了重复的id属性（循环生成的元素不能共用同一个id）

如果不使用Bootstrap内置类，手动加CSS的方式如下：
给父容器添加样式：

position: relative;
display: inline-block;

给删除按钮添加样式：

position: absolute;
top: 6px;
left: 6px;
z-index: 10;

内容的提问来源于stack exchange，提问作者Penny