React+Tailwind项目：滚动容器内阴影被粘性元素遮挡求助

架构老林

2026-6-16

解决方案：用伪元素模拟容器顶部内阴影

问题核心：容器的inset内阴影属于容器自身样式，会被内部sticky元素的背景覆盖，调整z-index无法改变这种层级关系（内阴影不会渲染在子元素之上）。以下是无需修改sticky元素位置的解决方法：

步骤1：调整容器样式

移除容器原有的shadow-inner-dark类，替换为自定义的伪元素阴影类，同时添加relative定位作为伪元素的参照：

<div className="mb-10 h-11/12 w-11/12 rounded-lg bg-white border overflow-y-scroll scrollbar-hide shadow-inner-top">

步骤2：添加模拟内阴影的工具类

在input.css的@layer utilities区块中新增代码，用线性渐变模拟顶部内阴影，并通过sticky定位保持在容器顶部：

@layer utilities {
    .scrollbar-hide::-webkit-scrollbar {
      display: none;
    }
    .scrollbar-hide {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    /* 新增：模拟容器顶部内阴影 */
    .shadow-inner-top {
      position: relative;
    }
    .shadow-inner-top::before {
      content: '';
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      height: 6px; /* 与原有内阴影高度匹配 */
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);
      z-index: 10; /* 确保层级高于sticky元素 */
      pointer-events: none; /* 不干扰下方元素交互 */
      border-top-left-radius: 0.5rem; /* 匹配容器的rounded-lg圆角 */
      border-top-right-radius: 0.5rem;
    }
}