如何解决表格中react-responsive-select滚动时覆盖吸顶表头的问题

该问题属于典型的堆叠上下文层级冲突：吸顶表头的默认z-index低于react-responsive-select组件的默认层级，表格滚动时，组件随单元格移动到表头下方，但因层级更高，视觉上就会出现穿透覆盖的效果。

注意：所有z-index配置仅在元素position属性为relative/absolute/fixed/sticky时生效，若调整后无效果可先检查对应元素的position配置

• 方案1：调整z-index优先级（最常用快速修复）
  给吸顶表头设置高于组件的z-index，同时搭配不透明背景避免透穿，样式示例如下：

  /* 吸顶表头自定义样式 */
  .table-header-sticky {
    position: sticky;
    top: 0;
    z-index: 1000; /* 数值只要大于react-responsive-select的默认z-index即可，默认通常为10~100 */
    background-color: #ffffff;
  }
  

  若表头z-index无法修改，也可主动降低组件的层级：

  /* 覆盖react-responsive-select默认样式 */
  .react-responsive-select {
    z-index: 10;
  }
  

• 方案2：清理堆叠上下文冲突
  如果调整z-index不生效，检查吸顶表头的所有父级元素，是否存在transform、perspective、filter、isolation: isolate等会触发新堆叠上下文的属性，这类属性会导致子元素的z-index只在当前父级上下文内生效，无法和外层表头做层级对比，移除对应属性即可恢复z-index的全局对比逻辑。

• 方案3：修改下拉菜单挂载节点
  若使用的是带下拉展开的select样式，可通过组件的自定义配置项，将下拉菜单挂载到body等表格外的上层节点，避免下拉菜单受表格内堆叠上下文的限制，单独配置下拉菜单的z-index低于表头即可。

• 方案4：滚动时自动收起下拉
  监听表格的滚动事件，触发时主动关闭所有已展开的react-responsive-select下拉框，从交互根源上避免覆盖问题。

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