如何在position: sticky表头上方绝对定位resize handle使其覆盖其他表头

问题根源 #

你的判断是准确的，该问题确实由堆叠上下文导致：position: sticky 元素默认会创建独立堆叠上下文，多个同级sticky表头的堆叠顺序遵循DOM节点的先后顺序，后面的表头层级天然高于前面的。而resize handle作为表头的子元素，z-index仅能在父表头的堆叠上下文内部生效，无法突破父级限制覆盖其他表头。

可行解决方案 #

方案1：动态修改当前操作表头的z-index（最常用，适配拖拽交互场景） #

给所有表头设置统一的基础z-index，当用户触发resize操作（hover/点击拖拽柄）时，给当前操作的表头设置更高的z-index，使其堆叠层级高于所有其他表头，内部的拖拽柄自然就能覆盖相邻表头。
修改后的代码如下：

.flex {
  display: flex;
  flex-direction: row;
}

.header {
  position: sticky;
  width: 300px;
  height: 100px;
  background-color: red;
  border:1px solid blue;
  /* 新增：设置基础堆叠层级 */
  z-index: 1;
  /* 新增：作为子元素absolute定位的参照基准 */
  position: relative;
}

/* 新增：当前操作的表头提升层级 */
.header.active {
  z-index: 2;
}

.resize-handle {
  position: absolute;
  width: 100px;
  height: 200px;
  top: 0;
  right: -50px;
  background-color: green;
  /* 可选：设置内部层级避免被表头内其他元素遮挡 */
  z-index: 10;
}

交互侧只需要在拖拽柄被hover/点击时，给父级.header添加active类，拖拽结束后移除即可。

方案2：拖拽柄脱离表头节点，作为容器直接子元素 #

如果不想依赖JS动态修改样式，可以调整DOM结构，把所有resize handle从.header中挪到flex容器下作为直接子元素，给拖拽柄设置position: sticky和更高的全局z-index，直接固定在对应表头的右侧位置即可。

.resize-handle {
  position: sticky;
  flex-shrink: 0;
  width: 10px; /* 可调整为实际需要的拖拽柄宽度 */
  height: 100px;
  /* 和表头的sticky偏移量保持一致 */
  top: 0;
  margin-left: -5px;
  background-color: green;
  z-index: 3;
  cursor: col-resize;
}

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