Tailwind css and Next.js nav component z-index not working

Question

I am currently working on a Next.js project with Tailwind.css. I have a header component called nav, with the following styling:

<div className="sticky top-0 z-100 body bg-white flex flex-row items-center">Nav content here</div>

This Nav component is imported and displayed on an _app.tsx level, which displays it across the entire website.

Now, for the majority of the pages, this works perfectly, the nav sits on top of everything, and is completely sticky.

However, I have an about page, that looks like this:

<div>
<div className="absolute bg-colortheme_color-blush w-full h-4/6 md:h-2/6 lg:h-3/6 -ml-6 mt-32 lg:mt-40 z-0 lg:-ml-44"></div
<div className="flex flex-col md:flex-row w-full pt-20 md:pt-40 mb-20 flex-1 justify-center relative z-10">About content here</div>
</div>

This is very simplified, for context, but that is the structure of the page. This content does not respect the Z-Index specified, and scrolls on top of the nav, whether the nav has a z-index or not.

I'm theorizing that the z-index doesn't really work like that in different components, but I am not sure if this is accurate.

Does anybody have an idea of what could be happening?

Answer 1

this happened because z-100 is not an available value in Tailwind Z-Index utility, you should either use an arbitrary value like z-[100] or z-50(since it's bigger than z-10)

see this Tailwind Play example