position:absolute的div溢出父容器后被隐藏，z-index设置无效问题求助

问题原因 #

你遇到的下拉菜单被遮挡问题和z-index无关，本质是 react-data-table-component 组件的表格容器、行、单元格默认设置了overflow: hidden，超出单元格范围的内容会被直接裁剪，哪怕子元素的z-index设置得再高也无法显示。

解决方案 #

方案1（推荐）：将下拉菜单渲染到根节点

react-bootstrap 的Dropdown.Menu原生支持指定渲染容器，只需要给组件添加container="body"属性，让下拉菜单直接挂载到页面body节点下，完全避开表格父容器的溢出裁剪规则，不会影响表格本身的滚动、布局逻辑。
修改后的代码如下：

<Dropdown>
  <Dropdown.Toggle size="sm" />
  <Dropdown.Menu size="sm" container="body">
    <Dropdown.Item>
      <i className="fa fa-edit mr-1" /> {"language item"}
    </Dropdown.Item>
    <Dropdown.Item>
      <i className="fa fa-download mr-1" /> {"language item"}
    </Dropdown.Item>
    <Dropdown.Item>
      <i className="fa fa-download mr-1" /> {"language item"}
    </Dropdown.Item>
    <Dropdown.Item>
      <i className="mdi mdi-eye mr-1" /> {"language item"}
    </Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

方案2：修改表格溢出规则

如果不希望改动下拉组件的渲染逻辑，可以手动添加全局样式覆盖表格组件的默认溢出设置：

.react-data-table-component,
.data-table-extensions-container,
.rdt_Table,
.rdt_TableBody,
.rdt_TableRow,
.rdt_TableCell {
  overflow: visible !important;
}

注意该方案可能导致表格横向滚动、固定列等功能出现样式异常，仅适合无特殊表格交互需求的场景使用。

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