如何在Next.js 14中使用Tailwind实现图片上叠加按钮？

问题核心是定位参考容器错误，再加上Next.js Image组件的布局特性，导致按钮无法和图片对齐：

• 你把relative类加在了Image组件上，但Next.js的Image属于替换元素，绝对定位的按钮无法正确以它为参考；同时按钮的父容器未设置定位，导致按钮会相对于页面或更高层级容器定位，自然出现错位。
• 另外Next.js Image组件需要明确尺寸约束，否则容易出现布局偏移。

修正后的代码：

<div className="relative lg:w-[430px]">
  <Image
    src={projectAiWriter}
    alt="ai"
    className="w-full h-auto"
    width={430}
    height={/* 填入图片对应的高度值，可根据图片比例计算 */}
  />
  <button className="absolute inset-0 flex items-center justify-center text-black">
    Button
  </button>
</div>

关键改动说明：

• 将relative移到外层包裹div，让按钮的绝对定位以这个容器为参考基准
• 给Image添加w-full h-auto，确保图片在容器内自适应缩放，同时必须设置width和height属性（Next.js 14的Image组件要求必填这两个属性，也可以用fill模式配合父容器定位实现自适应）
• 按钮用inset-0替代top-0 bottom-0 left-0 right-0，写法更简洁，同时通过flex属性实现按钮文字的居中对齐

如果需要图片固定比例显示，可给外层div添加aspect-[x/y]类（比如aspect-[16/9]，根据你的图片实际比例调整），这样图片会自动适配容器比例，无需手动设置height值。

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