Bootstrap4 粘性表格单元格内Dropdown下拉菜单被遮挡问题求助

问题原因 #

所有设置了sticky定位的单元格都会独立创建层叠上下文，DOM结构中排在后方的sticky单元格默认层叠等级高于前方的单元格，所以后方单元格会自然覆盖前方单元格内弹出的下拉菜单，单独调整下拉菜单的z-index不会生效，因为下拉菜单的层叠等级被限制在所属的sticky单元格的层叠上下文内。

解决方案 #

方案1：CSS原生方案（兼容Chrome 105+、Firefox 121+、Safari 15.4+） #

直接通过:has选择器匹配当前展开了下拉菜单的操作单元格，提升其整体层叠等级即可：

/* 基础sticky配置 */
.action {
  position: sticky;
  right: 0; /* 操作列在最右侧时必须加，保证横向滚动时固定在右侧 */
  z-index: 10;
  background-color: #fff; /* 避免滚动时后方内容透出 */
}

/* 展开下拉的单元格提升层级 */
.action:has(.dropdown.show) {
  z-index: 1020; /* 高于其他所有sticky单元格即可 */
}

方案2：JS兼容方案（适配所有支持Bootstrap4的浏览器） #

监听Bootstrap下拉菜单的展开/收起事件，动态调整当前操作单元格的层叠等级：

/* 基础sticky配置和方案1一致 */
.action {
  position: sticky;
  right: 0;
  z-index: 10;
  background-color: #fff;
}

$('.dropdown').on('show.bs.dropdown', function () {
  // 展开时提升当前操作单元格层级
  $(this).closest('.action').css('z-index', 1020);
}).on('hide.bs.dropdown', function () {
  // 收起后恢复原有层级
  $(this).closest('.action').css('z-index', 10);
});

注意事项 #

1. 所有操作列的<td>统一添加action类，sticky定位要加在<td>元素上，不要加在内部的dropdown容器上，避免定位逻辑异常
2. 如果操作列固定在左侧，把right:0替换为left:0即可

内容的提问来源于stack exchange，提问作者Gonçalo Marrafa