Navbar内搜索用户组件获焦渲染列表时输入框上移问题求助

问题描述 #

我在网站导航栏中开发了搜索用户组件，正常状态下组件在导航栏内居中对齐，但点击输入框获焦并渲染用户列表时，输入框会偏移至导航栏顶部。

相关代码 #

SearchUserComponent #

return (
    <div className="flex justify-center flex-col">
      <div>
        <input
          style={inputStyling}
          type="text"
          onChange={onSearchChange}
          onBlur={() => {
            if (!element?.parentElement?.matches(":hover")) {
              setIsVisible(false);
            } else {
              setIsVisible(true);
            }
          }}
          onFocus={() => setIsVisible(true)}
        />
      </div>
      <div
        style={{ backgroundColor: "#f4f4f4" }}
        id="listcontainer"
        className=""
      >
        {isVisible &&
          filteredUsers.map((user) => {
            return (
              <div key={user?.id}>
                  <p className="p-2">{user?.username}</p>
              </div>
            );
          })}
      </div>
    </div>
);

NavBar #

<nav className="sticky z-20 top-0 justify-between [&>.link]:max-xl:hidden w-[100%] p-0 [&>*]:my-auto h-[3.2rem] flex flex-row bg-white border-b">
  <div>
    <Link className="flex pl-4 flex-row justify-center" href="/">
      <Image src={Logo} width={150} height={200} alt="logo" />
    </Link>
  </div>
  <div className="flex flex-col justify-center">
    <SearchUserComponent />
  </div>
</nav>

问题原因 #

导航栏是固定高度的sticky布局，用户列表渲染时处于文档流内，撑开了搜索组件的父容器，破坏了原本的flex居中对齐逻辑，导致输入框偏移。

修复方案 #

通过让用户列表脱离文档流，避免影响导航栏内的布局：

修改SearchUserComponent #

return (
    {/* 添加relative，使下拉列表相对该容器定位 */}
    <div className="flex justify-center flex-col relative">
      <div>
        <input
          style={inputStyling}
          type="text"
          onChange={onSearchChange}
          onBlur={() => {
            if (!element?.parentElement?.matches(":hover")) {
              setIsVisible(false);
            } else {
              setIsVisible(true);
            }
          }}
          onFocus={() => setIsVisible(true)}
        />
      </div>
      <div
        {/* 设置绝对定位，脱离文档流，定位在输入框下方 */}
        style={{ backgroundColor: "#f4f4f4", position: "absolute", top: "100%", left: 0, right: 0 }}
        id="listcontainer"
        className=""
      >
        {isVisible &&
          filteredUsers.map((user) => {
            return (
              <div key={user?.id}>
                  <p className="p-2">{user?.username}</p>
              </div>
            );
          })}
      </div>
    </div>
);

修改NavBar #

<nav className="sticky z-20 top-0 justify-between [&>.link]:max-xl:hidden w-[100%] p-0 [&>*]:my-auto h-[3.2rem] flex flex-row bg-white border-b">
  <div>
    <Link className="flex pl-4 flex-row justify-center" href="/">
      <Image src={Logo} width={150} height={200} alt="logo" />
    </Link>
  </div>
  {/* 添加h-full，确保父容器始终占满导航栏高度，维持输入框居中 */}
  <div className="flex flex-col justify-center h-full">
    <SearchUserComponent />
  </div>
</nav>

修复说明 #

1. 给搜索组件外层容器添加relative类，作为绝对定位列表的参考容器
2. 给用户列表容器设置position: absolute和top: 100%，让列表固定在输入框正下方，且不占用导航栏内的空间
3. 给导航栏内的搜索父容器添加h-full，确保其高度始终匹配导航栏，维持输入框的居中对齐状态

内容的提问来源于stack exchange，提问作者xoreks