DEV Community

Ekrem Günden
Ekrem Günden

Posted on


Tailwind CSS and Next/Image Z-index not working

Image description

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

<section className="bg-[#DBD9FF] z-30" id="services">
Enter fullscreen mode Exit fullscreen mode

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?

Top comments (1)

designly profile image
Jay @ Designly • Edited

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.

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!