Currently, I am immersed in a Next.js project that utilizes Tailwind.css. Within this project, there is a header component known as nav, styled as follows:
<div className="sticky top-0 z-100 body bg-white flex flex-row items-center">Nav content here</div>
The Nav component is imported and visible at the _app.tsx level, ensuring it appears throughout the entire website.
For the most part, this setup functions seamlessly with the nav staying fixed on top and remaining sticky across pages. However, an about page presents a different scenario:
<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 markup is just a simplified version for context purposes. The issue arises where this content fails to respect the specified z-index and ends up scrolling above the nav section regardless of its z-index setting.
I suspect that perhaps z-index behavior may differ when applied to different components, but I am uncertain if this theory holds any truth. Can anyone provide some insights into what might be causing this problem?