I have following setup:

```
<div class="wrapper">
   <div class="element" id="first"></div>
   <div class="element"></div>
   <div class="element"></div>
   <div class="element"></div>
...
</div>

```

so wrapper is set to `overflow-x: auto` and content that overflows it is horizontally scrollable. `#first` div has fixed position and more styling applied, but essentially it is always visible and other divs scroll behind it, like this:

![enter image description here](https://i.stack.imgur.com/klD69.png)

issue here is that I'm using drag and drop functionality which works fine, but once I try to drop stuff on a fixed div and if it has content behind it, the drag and drop happens to that content. Basically feels like I'm interacting with stuff behind fixed div even though it is in front. I know fixed elements are out of the flow and maybe this is whats causing it? But I can't figure out how to make content behind that div stay behind it.