How to put a button on an image with tailwind in nextjs?

Issue

I could not succeed in showing a button on an image with tailwind and next.js 14. Here is my following code:

<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>

The button is not aligned on the image, but is over it.

Solution

Make the parent relative and the button absolute as so:

<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>;

Answered By - X8inez