React下Datatable表头遮挡select下拉框，设置z-index无效如何解决？

Datatable 表头遮挡下拉选择（select）列表，分别给两个元素设置 z-index:1 或 z-index:9999 均不生效，效果如下：

z-index 仅在同一个层叠上下文内生效，设置后无效的本质是两个元素不在同一个层叠上下文，或某一方的父容器层叠上下文限制了子元素的层级上限。

按优先级从高到低尝试以下操作：

• 调整下拉弹窗的挂载节点，脱离表格层叠上下文限制
  绝大多数React下拉组件默认会将弹窗挂载到当前组件的父DOM节点下，如果该节点位于表格的td/tr内部，会被表格自身的层叠上下文限制，此时将弹窗挂载到全局body即可解决：

  Ant Design Select 配置：getPopupContainer={trigger => document.body}
  Material UI Select 配置：MenuProps={{ container: document.body }}
  自定义封装的下拉组件可以通过 React.createPortal 将下拉列表渲染到body节点下

• 调整表头的z-index配置
  大部分Datatable组件为了实现表头吸顶，默认会给position: sticky的表头设置较高的内置z-index，你可以手动覆盖该样式降低表头层级：

  .datatable thead th {
    z-index: 1 !important;
  }
  

• 排查父容器溢出配置
  检查表格外层容器是否设置了overflow: hidden/auto/scroll，该属性会裁切容器内部超出范围的元素，此时哪怕z-index再高也无法显示在容器外，要么调整容器的overflow属性，要么依旧采用挂载到body的方案解决。
• 统一层叠上下文层级
  如果无法修改弹窗挂载节点，找到表头和下拉组件各自的顶层层叠上下文父元素，给下拉组件的顶层父元素设置比表头顶层父元素更高的z-index即可。

打开浏览器开发者工具的元素面板，分别选中表头元素和下拉列表元素，在「计算样式」栏查看z-index值和对应的层叠上下文父节点，确认两者的父层上下文层级关系是否符合预期。

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