I d like to create a transparent background to go with my nav sidebar element. I was thinking of layering the div containing the sidebar on top of a div that would act as the transparent background. Here is what I came up with so far.
<div className="w-[250px] h-screen bg-[#049572] fixed flex items-center justify-center z-[2]">
<ul>
<li onClick={() => setIsOpen(false)}>
<a href="#Intro">Home</a>
</li>
<li onClick={() => setIsOpen(false)}>
<a href="#AboutMe">About </a>
</li>
<li onClick={() => setIsOpen(false)}>
<a href="#Skills">Skills</a>
</li>
<li onClick={() => setIsOpen(false)}>
<a href="#Projects">Projects</a>
</li>
<li onClick={() => setIsOpen(false)}>
<a href="#Contact">Contact Me</a>
</li>
</ul>
</div>
<div className="bg-[#000000] opacity-[0.5] h-screen h-[100%] z-[1]">
</div>
The problem is that the div that is supposed to act as the background is pushing the other elements on the page down and not layering on top of the other elements like I expected. What is the best way to create a transparent background in tailwind?