如何让滚动固定阴影覆盖含relative属性的VideoComponent且不破坏功能

问题核心是VideoComponent的relative容器创建了独立堆叠上下文，导致其层级高于外部的顶部阴影。以下是几种不破坏组件原有功能的解决办法：

方案一：提升阴影的堆叠层级（推荐） #

通过给阴影元素设置z-index，并将父容器main设为定位上下文，确保阴影层级高于所有内容：

<div id='main' class="flex h-full relative">
  <div class="absolute inset-0 shadow-[inset_0_10px_3px_red] pointer-events-none z-10"></div>
  <div id='sub' class="overflow-auto" style="width: 100vw">
    <div class="h-[50vh] bg-blue-200">Some text</div>
    <div class="h-[50vh] bg-sky-200">Some text</div>
    <VideoComponent />
    <div class="h-[50vh] bg-teal-200">Some text</div>
    <div class="h-[50vh] bg-emerald-200">Some text</div>
  </div>
</div>

• 原理：main设为relative后，阴影的z-index会相对于main生效；z-10确保阴影层级高于sub内的所有元素，包括VideoComponent。
• 优势：完全保留原有布局逻辑，不会影响VideoComponent内部的absolute元素覆盖视频的功能。

方案二：降低VideoComponent的堆叠层级 #

给VideoComponent的容器添加z-0（或更低的z-index），让其层级低于阴影：

export function VideoComponent() {
  return (
    <div className="relative grid z-0">
      <video className="aspect-video rounded-lg" ref={videoRef} />
      {needText && (
        <div className="absolute h-full w-full">
          <TextView />
        </div>
      )}
      {needPhoto && (
        <div className="absolute h-full w-full">
          <PhotoView />
        </div>
      )}
    </div>
  );
}

• 注意：如果sub内还有其他带relative/absolute定位的元素，可能会出现遮挡问题，需谨慎使用。

方案三：将阴影改为fixed定位 #

把阴影改为固定定位，使其始终悬浮在视口顶部，不受滚动影响：

<div id='main' class="flex h-full">
  <div id='sub' class="overflow-auto" style="width: 100vw">
    <div class="fixed top-0 left-0 right-0 shadow-[inset_0_10px_3px_red] pointer-events-none h-[10px]"></div>
    <div class="h-[50vh] bg-blue-200">Some text</div>
    <div class="h-[50vh] bg-sky-200">Some text</div>
    <VideoComponent />
    <div class="h-[50vh] bg-teal-200">Some text</div>
    <div class="h-[50vh] bg-emerald-200">Some text</div>
  </div>
</div>

• 原理：fixed定位的元素脱离文档流，始终相对于视口定位，自然覆盖所有滚动内容。
• 调整：需将阴影的高度设为阴影实际占用的尺寸（比如h-[10px]），避免遮挡页面顶部内容。

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