如何在nextjs中使用tailwind在图像上放置按钮？

Question

正如标题所说，我无法成功在顺风和下一个 14 的图像上显示按钮，实际上这是我的以下代码：

<div>
            <Image
              src={projectAiWriter}
              alt="ai"
              className="lg:w-[430px] relative"
            />
            <div>
              <button className="lg:w-[430px] text-black absolute w-full h-full top-0 bottom-0 left-0 right-0 flex items-center justify-center">
                Button
              </button>
            </div>
          </div>

我在谷歌搜索中查找的信息向我展示了一些像我一样的代码片段，但按钮仍然没有在图像上对齐，但它已经结束了，等待一些提示。

Answer 1

将父级

relative

和按钮

absolute

设为如下：

 <div className="relative lg:w-[430px]">
              <Image
                src={projectAiWriter}
                alt="ai"
                className="lg:w-[430px]"
              />
              <div>
                <button className="lg:w-[430px] text-black absolute w-full h-full top-0 bottom-0 left-0 right-0 flex items-center justify-center">
                  Button
                </button>
              </div>
            </div>