Tailwind Hero Section with Drop Down Menu

hi there! 👋

z-index is a tricky property, because sometimes the rendering of the elements depend on the parent container's z-index or position properties. sometimes z-index will not make any difference if you apply it an element with static positioning. if you struggle with z-index, try to apply position: relative; or any other than static (which is the default) positioning to elements. I had a rally hard time figuring this out when I first created a semi-transparent overlay. elements with higher z-index just wouldn't appear above the overlay. then I just applied relative positioning to them and boom.

the other thing is the isolation property, which also can mix things up, because if you apply isolation: isolate; to the parent element that will create an entirely new stacking context.

So just check the position attributes of the elements if you get stuck with z-index, and make sure you don't apply isolation to parent elements unnecessarily.

Hope this helped 🙏

Good luck and happy coding! 🙌

@koda, but here is another question that has been bothering me, when it comes to the use of Z Index, inside the parent component, the Z index does not work when applied to child components within the parent component (page), you will have to apply it on child components respectively, why is that if you have any clue?