如何将Div元素定位至图片右下角（基于TailwindCSS）

你的问题出在未给宽高比容器设置相对定位，绝对定位的元素需要一个相对定位的父容器作为参照，否则会相对于页面或更上层的非静态定位元素偏移；同时原代码里的<image>标签是错误的，需改为标准<img>标签。

修改后的代码 #

<div class="mt-5 grid grid-cols-2 gap-3 px-3">
  <div class="aspect-w-3 aspect-h-4 relative">
    <img
      src="http://unsplash.it/500/500?random&gravity=center"
      alt="Profile Image"
      class="rounded-md"
      layout="fill"
    />
    <div class="absolute bottom-2 right-2 text-white bg-black/70 p-1 rounded-full">X</div>
  </div>
</div>

关键修改点 #

• 给包含图片和按钮的<div>添加relative类，让内部的绝对定位元素以此容器为参照
• 纠正错误的<image>标签为标准的<img>标签
• 调整按钮的right-2（原right-0），让按钮和图片右侧保留一点间距，视觉更舒适（可根据需求调整数值）
• 额外给按钮添加bg-black/70 p-1 rounded-full类，提升按钮辨识度与美观度（可选）

原问题代码 #

<div class="mt-5 grid grid-cols-2 gap-3 px-3">
      <div class="aspect-w-3 aspect-h-4">
        <image
          src="http://unsplash.it/500/500?random&gravity=center"
          alt="Profile Image"
          class="rounded-md"
          layout="fill"
        />
        <div class="absolute bottom-2 right-0 text-white">X</div>
      </div>
    </div>

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