Datatables custom div overlay - html

Question

I want to create custom select div container working together with datatables but there is a problem i faced
This is how it looks without datatables (basic html table):
and this is how it looks with datatables:
As i understand the problem is in datatables overflow but i cant figure out how to deal with this.
Is it possible to make this custom select to be overlayed datatables table as it is with basic html table without datatables?
Here is HTML code of my custom select:
<td class='text-center'>
<input
type="text"
class='form-control form-control-sm w-auto'
placeholder="Трекинг-система"
v-model='LiveEdit_value'
#blur='LiveEditBlur'
autocomplete="off"
v-focus
>
<div
class='position-absolute w-auto shadow-sm rounded bg-light'
style='max-height: 300px; overflow: auto; z-index: 1'
>
<ul class='list-group'>
<a href='javascript:void(0)'
class='list-group-item list-group-item-action py-1 px-2'
v-for='trackingsys in filteredTrackingSystems'
#mousedown.prevent='LiveEdit_value = trackingsys.name; LiveEditBlur()'
>
<img :src='trackingsys.logo' width='16' class='mr-1'> {{ trackingsys.name }}
</a>
</ul>
</div>
</td>
Thanks