position: sticky面板不生效？粘性元素阴影效果实现求助

我尝试在flex容器内的粘性元素上通过::after伪元素添加阴影效果，但未达预期：

• 使用position: fixed;时，阴影会覆盖主表格
• 使用position: relative;或position: absolute;时，阴影仅在水平滚动后才出现，无法像表格表头和行的粘性元素那样在滚动时始终可见
• 相同的阴影方案对表头和行有效，但对面板无效，如何为面板实现相同的粘性阴影效果？

当前使用的样式代码：

const CollapseWrapper = styled.div`
  display: flex;
  background-color: #cacaca;
  border-bottom: 1px solid black;
  user-select: none;
  width: 1750px;
  ::after {
    content: "";
    position: fixed;
    width: 140px;
    height: 100%;
    right: 0;
    top: 0;
    pointer-events: none;
    box-shadow: -3px 0px 4px -2px rgba(0, 0, 0, 0.45);
  }
`;

问题效果：价格下方右侧区域未正确显示阴影
预期效果：价格下方右侧区域始终显示阴影

核心修改思路 #

1. 给粘性容器添加position: sticky定位，确保它在水平滚动时固定在视窗一侧
2. 将伪元素的定位从fixed改为absolute，让它相对于粘性容器定位，跟随容器一起固定
3. 调整层级和阴影参数，避免覆盖表格并实现预期视觉效果

修改后的样式代码 #

const CollapseWrapper = styled.div`
  display: flex;
  background-color: #cacaca;
  border-bottom: 1px solid black;
  user-select: none;
  width: 1750px;
  /* 设置粘性定位，水平滚动时固定在左侧 */
  position: sticky;
  left: 0;
  /* 确保容器层级高于表格，避免被覆盖 */
  z-index: 1;
  /* 作为伪元素的定位上下文 */
  position: relative;

  ::after {
    content: "";
    /* 绝对定位，相对于粘性容器 */
    position: absolute;
    /* 缩小阴影宽度，避免过度覆盖表格 */
    width: 20px;
    height: 100%;
    /* 定位在容器右侧边缘 */
    right: 0;
    top: 0;
    pointer-events: none;
    /* 调整阴影参数，增强过渡效果 */
    box-shadow: -5px 0 8px -3px rgba(0, 0, 0, 0.45);
    /* 让阴影在容器和表格之间，避免遮挡表格内容 */
    z-index: -1;
  }
`;

原因说明 #

• 原fixed定位的伪元素相对于视窗定位，脱离了粘性容器的上下文，导致位置错误并覆盖表格
• 未设置sticky时，absolute伪元素会跟随容器一起滚动，只有容器滚动到右侧时才会显示
• 添加position: sticky; left: 0后，容器在水平滚动时固定，absolute伪元素会始终附着在容器右侧边缘
• 调整z-index和阴影宽度，确保阴影既可见又不会干扰表格内容

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