Tailwind CSS and Next/Image Z-index not working

<div className="flex justify-between h-screen md:flex-row flex-col pt-64">
          ...
          <div className="z-50">
              <Image src="/Saly-14.svg" className="w-[916px] height-[1384px]" alt="" width={916} height={1384} />
          </div>
      </div>

<section className="bg-[#DBD9FF] z-30" id="services">
...
      </section>

The name of this character is saly and even though I made it lower than the z-index of the section below, it still doesn't work. What could be the reason. Has anyone found a solution to a similar error before?

Comments

[Jay @ Designly]

You should upgrade to NextJS 13. They completely reworked next-image and it doesn't use that stupid <span> wrapper anymore. I bet that would fix your problem. For more information, check out Vercel's Upgrade Guide.