React MultiSelect下拉框被Div遮挡，需调整绝对定位与响应式布局

问题分析 #

下拉列表被div遮挡，核心原因是组件默认的下拉菜单定位规则导致其被父容器的overflow属性截断，或是层级低于其他元素。通过设置绝对定位并调整层级，再配合响应式样式即可解决。

解决方案代码示例 #

import MultiSelect from "react-multi-select-component";
import "./MultiSelectCustomStyle.css"; // 引入自定义样式文件

// 组件使用部分
<div className="multi-select-container">
  <MultiSelect
    options={options}
    value={selectedValue}
    onChange={onValueChanged}
    labeledBy="Select" // 修正原代码的语法错误
    filterOptions={customSearch}
    className="custom-multi-select"
  />
</div>

自定义样式文件（MultiSelectCustomStyle.css） #

/* 相对定位容器，作为下拉菜单的定位基准 */
.multi-select-container {
  position: relative;
  width: 100%;
  max-width: 400px; /* 限制最大宽度，适配响应式 */
}

/* 调整下拉菜单的定位与层级 */
.custom-multi-select .rmsc__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000; /* 提高层级，避免被其他元素遮挡 */
  box-sizing: border-box;
}

/* 响应式适配：小屏幕下调整样式 */
@media (max-width: 576px) {
  .multi-select-container {
    padding: 0 10px;
  }

  .custom-multi-select .rmsc__dropdown {
    max-height: 250px; /* 限制下拉菜单高度，避免超出屏幕 */
  }
}

/* 可选：调整组件整体样式，优化响应式显示 */
.custom-multi-select .rmsc__select {
  width: 100%;
  padding: 8px 12px;
}

关键说明 #

• 定位基准：给组件包裹position: relative的容器，确保下拉菜单的绝对定位是基于该容器，不会跑出父元素范围。
• 层级控制：设置z-index: 1000（可根据实际页面层级调整数值），确保下拉菜单显示在其他元素上方。
• 响应式适配：通过@media查询，在小屏幕下调整容器内边距、下拉菜单最大高度，避免下拉列表超出可视区域。
• 语法修正：原代码中labelyour textledBy是语法错误，修正为labeledBy才能正常生效。

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