Buttons and search do not work in fixed div/form - html

Question

I am creating a form that will be fixed to the top of a page. However, when I implement position: fixed to the parent div of the form, the search bar and buttons do not work. Here is the code:
<div className="fixed flex xl:pl-64 md:pl-2 sm:pl-2 p-4 w-2/4 bg-red-600 top-0 w-full ">
<h1 className="text-2xl text-white float-left"> Customer Search </h1>
<input className="border-2 border-gray-300 bg-white h-10 px-5 pr-16 rounded-lg text-sm focus:outline-none"
name="search"
placeholder="Search for..."
type="text"/>
<div className="text-white py-2 px-4 rounded border-2 border-red-100"> search </div>
<div className="text-white py-2 px-4 rounded border-2 border-red-100"> filter </div>
<div className="text-white py-2 px-4 rounded border-2 border-red-100"> clear </div>
</div>
Now, I did it in JSFiddle and the buttons do work. So now I am wondering, what could be wrong with my code? When I remove fixed, the search bar and buttons work just fine.

Answer 1

Welp, I fixed it. Much simpler than anticipated. I just added z-10 to the header. I guess it was being overlapped by some non-viewable thing.
<div style={{'height': '900px'}} className="w-full flex">
<div className="fixed xl:pl-64 md:pl-2 sm:pl-2 p-4 w-full bg-red-600 sm:pb-4 z-10">
<h1 className="text-4xl text-white pl-4 z-50"> Users </h1>
<p className="pt-2 pl-4">
<input className="w-3/4 rounded h-8 border-gray-400 border-2" type="text" placeholder="Search.." name="search"/>
<button className="text-white fa-lg pl-4" type="submit"><FontAwesomeIcon icon={faSearch}/></button>
<button className="ml-6 py-2 px-5 bg-gray-400 shadow z-50">Add User</button>
</p>
</div>