如何使阴影覆盖具有 css 属性“相对”的组件

Question

下面是一段简单的代码，其本质可以归结为：页面顶部有一个阴影，如果垂直滚动页面，这个阴影会一直可见，遮盖住该组件（除了 VideoComponent ）位于 id='sub' 的 div 中。

   <div id='main' class="flex h-full">
    <div class="absolute inset-0 shadow-[inset_0_10px_3px_red] pointer-events-none"></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>

你可能会问为什么需要在VideoComponent中使用“相对”CSS属性......我会解释一下。因为在 VideoComponent 中，我使用 html 标签视频，并使用 CSS 属性“absolute”在视频本身上覆盖文本和照片。以缩写形式，此代码如下所示：

 export function VideoComponent() {
  return (
    <div className="relative grid">
      <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>
  );
}

如果阴影穿过 VideoComponent，则阴影不再可见，这意味着 VideoComponent 覆盖了阴影。发生这种情况是因为 VideoComponent 具有“相对”css 属性。

我的问题是：如何更改 VideoComponent，以便在滚动时它会被阴影覆盖，并且不会破坏该组件中的当前功能。

也许，不知何故，您可以影响的不是 VideoComponent，而是阴影（代码的第一部分）。

如有任何建议，我将不胜感激

Answer 1

这里演示了 z-index 如何影响绝对或相对元素的堆叠顺序。您可能需要在阴影上方显示的元素上使用负 z 索引，或者在应该覆盖相对定位的元素的阴影上使用正 z 索引。

此外，如果阴影在 html 中出现的时间比相对定位的元素晚，那么它在堆叠顺序中也将具有更高的优先级。

如果您有任何问题，我很乐意回答。

* {
  box-sizing: border-box;
}

#element-with-inset-shadow {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0px 10px 10px red;
  pointer-events: none;
}

#element-over-shadow {
  height: 50px;
  background-color: lightblue;
  position: relative;
}

#negative:checked ~ #element-over-shadow {
  z-index: -1;
}

#positive:checked ~ #element-with-inset-shadow {
  z-index: 1;
}

<label for="default">default</label>
<input 
  checked
  type="radio" name="index-state" id="default" />
  <br>
<label for="negative">
  negative z index for element over shadow
</label>
<input 
  type="radio" name="index-state" id="negative" />
  <br>
<label for="positive">
  positive z-index on absolute shadow
</label>
<input 
  type="radio" name="index-state" id="positive" />

<div id="element-with-inset-shadow"></div>
<div id="element-over-shadow"></div>