按钮和搜索在固定的div/form中不起作用

Question

我正在创建一个表单，将固定在页面的顶部。但是，当我将position: div实现到窗体的父div时，搜索栏和按钮就不起作用了。代码如下：

    <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">  &nbsp; Customer Search &nbsp; &nbsp;</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"/>
                &nbsp;  &nbsp;  &nbsp;
                <div className="text-white py-2 px-4 rounded border-2 border-red-100"> search </div>
                &nbsp;  &nbsp;  &nbsp;
                <div className="text-white py-2 px-4 rounded border-2 border-red-100"> filter </div>
                &nbsp;  &nbsp;  &nbsp;
                <div className="text-white py-2 px-4 rounded border-2 border-red-100"> clear </div>
   </div>

现在，我在JSFiddle中做到了这一点，按钮可以正常工作。所以现在我想知道，我的代码可能出了什么问题？当我移除fixed后，搜索栏和按钮就可以正常工作了。

Answer 1

好吧，我修好了。比预期的要简单得多。我刚刚在标题中添加了z-10。我猜它被一些不可见的东西重叠了。

<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> &nbsp;
              <button className="ml-6 py-2 px-5 bg-gray-400 shadow z-50">Add User</button>
          </p>
        </div>