<Div class="main-table overflow-y-auto overflow-x-auto h-full" on:scroll={handleScroll} bind:this={mainTable}>

<div class="h-10"></div>

<div class="flex h-full flex-col bg-neutral-900 absolute" style="top:{pinnedColumnTop}px;">
{#each $tracks as track}
<div
class="h-8 bg-neutral-900"
style="width: {iconCellWidth}px"
>
▶️
</div>
{/each}
</div>

{#each $tracks as track}
<div class="flex h-8 relative">
<div class="w-xs h-8" style="width: {iconCellWidth}px" />
{#each $characteristics as characteristic}
{#if !characteristic.hidden}
<div
style="width: {characteristic.columnWith}px; max-width: {characteristic.columnWith}px"
class="truncate text-left content-center px-2"
>
{track[characteristic.key]}
</div>
{/if}
{/each}
</div>
{/each}

<div class="flex h-10 absolute bg-neutral-900 border-r-2 border-neutral-700" style="top:45px;">
<div
class="h-8 bg-neutral-900 fixed"
style="width: {iconCellWidth}px"
/>
<div class="w-xs h-8" style="width: {iconCellWidth}px" />
{#each $characteristics as characteristic}
{#if !characteristic.hidden}
<TableHeaderElement
bind:characteristicModel={characteristic}
bind:sortDirection
bind:sortingKey
/>
{/if}
{/each}
</div>
</div>
Как сделать, чтобы скроллбокс был выше по z, чем элементы с pozition-absolute, но при этом чтобы кликнуть по содержимому сколлимого контейнера все еще было можно?

скроллбар* содержимое с pozition-absolute перекрывает скрооллбар