Below is a simple code, the essence of which boils down to the following: at the top of the page there is a shadow and if you scroll the page vertically, this shadow will be constantly visible, covering the components (except VideoComponent ) that are located in the div with id=’sub’.

  <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>
      <VideoComponent />
      <div class="h-[50vh] bg-teal-200">Some text</div>
      <div class="h-[50vh] bg-emerald-200">Some text</div>
    </div>
  </div>

If a shadow passes through a VideoComponent, the shadow is no longer visible, meaning the VideoComponent covers the shadow. This happens because VideoComponent (and many of its child components) have the “relative” css property. I can’t seem to get rid of “relative” inside VideoComponent as it breaks a lot.

My question is, can I somehow influence the position of the shadow from this part of the code, so that when scrolled, the shadow covers the VideoComponent as well as other components