Question

我正在创建一个将固定在页面顶部的表单。但是，当我实现position：固定到表单的父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中做到了，按钮也可以正常工作。所以现在我想知道，我的代码可能出什么问题了？当我删除固定的内容后，搜索栏和按钮可以正常工作。

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>

按钮和搜索不适用于固定的div /格式

1 个答案: