自定义Select容器与Datatables兼容问题：实现表格上方覆盖显示

我想制作一个可与Datatables配合使用的自定义Select div容器，但遇到了显示问题：

• 无Datatables（基础HTML表格）时，自定义选择框能正常展开显示
• 使用Datatables时，自定义选择框被表格截断，无法完整显示

我猜测问题出在Datatables的overflow属性上，但不知道如何解决。能否让这个自定义选择框像在基础HTML表格中那样，覆盖在Datatables表格上方？

我的自定义Select的HTML代码如下：

<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>

1. 修改Datatables容器的overflow属性 #

Datatables默认会给容器（通常是div.dataTables_wrapper）设置overflow: auto，这会截断绝对定位的下拉框。通过CSS调整：

div.dataTables_wrapper {
    overflow: visible !important;
}
table.dataTable tbody, table.dataTable thead {
    overflow: visible !important;
}

2. 提升下拉框的层级 #

当前下拉框的z-index:1层级不足，无法覆盖Datatables的元素，调大层级值：

<div 
    class='position-absolute w-auto shadow-sm rounded bg-light'
    style='max-height: 300px; overflow: auto; z-index: 9999'
>

3. 修正下拉框的定位上下文 #

绝对定位元素依赖最近的position: relative父元素，给<td>添加相对定位：

<td class='text-center position-relative'>

4. 备选方案：将下拉框移出表格DOM #

如果上述方法无效，可将下拉框放到<body>下，通过JS计算输入框的坐标动态定位下拉框，彻底脱离表格的overflow限制。

内容的提问来源于stack exchange，提问作者inGame