如何让阴影（css）与内容重叠

Question

如您所见，我有一个相当简单的组件。主 div (id='main') 具有影子属性。还有第二个 div (id='sub') ，其中包含很多内容（按钮、下拉菜单等。不过，我简化了上面示例中的代码）。

问题是当内容滚动时，内容中的组件（按钮、下拉菜单等）与阴影重叠（即某些地方滚动时看不到阴影）

问题：如何让阴影与内容重叠？

  return (
<div id='main' className="flex h-full shadow-[inset_0_10px_3px_red] ">
  <div
    id='sub'
    ref={ref}
    className="overflow-auto"
    style={{
      width: '100vw',
    }}
  >
    <div>Some text</div>
    // long list from <div>Some text</div>
    <div>Some text</div>
  </div>
</div>

）；

Answer 1

您可以考虑在

main

容器中添加另一个具有阴影的元素。将此元素堆叠在元素的顶部，使其阴影覆盖所有内容。

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div class="h-screen">
  <div id='main' class="flex h-full relative">
    <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>
      <div class="h-[50vh] bg-cyan-200">Some text</div>
      <div class="h-[50vh] bg-teal-200">Some text</div>
      <div class="h-[50vh] bg-emerald-200">Some text</div>
    </div>
  </div>
</div>