下拉菜单不继承其父位置

Question

     <div className="inner-dark-section">
        <div
          className="search-section"
          style={{
            width: "100%",
            position: "sticky",
            top: "0",
            zIndex: 10,
            backgroundColor: "#1b1b1b",
            paddingTop: "25px",
          }}
        >
          <RepSearch queryProcessor={processQuery} currQuery={currQuery} />
        </div>
      </div>

在 ResSearch 组件中有两个下拉菜单 (antd)，但是下拉菜单没有继承它的父位置，因为它不是 sticky 当滚动时它滚动到 RepSearch 元素。

.ant-select-dropdown {
  background-color: $util-dropdown;
  border-radius: 5px;
  box-shadow: 0 0 0 1.5px rgba(91, 91, 91, 0.5),
    0 9px 28px 8px rgba(0, 0, 0, 0.05);
  position: fixed;
}

如何使下拉菜单在滚动时随 RepSearch 组件一起移动

Answer 1

如文档所述，如果您发现下拉菜单随页面滚动，请尝试使用 getPopupContainer = {triggerNode => triggerNode.parentElement}
修复下拉弹出窗口渲染。

下拉菜单不继承其父位置

Dropdown menu not inherit its parent position

css

drop-down-menu

reactjs

dropdown

antd