css - 引导 CSS z-index

Question

我正在尝试将一个 div 放在另一个之上。我通读了本网站上问题的不同答案。但他们都没有为我工作。我希望搜索结果（'Anton'）出现在表格（'Customer'）的顶部。

下面是我与搜索文本框和结果 div 相关的代码片段。（仅供参考：我正在使用 Laravel LiveWire）

<div class="relative pb-2">
    <input 
        type="text" 
        name="model-search" 
        wire:model="query"
        wire:keydown.escape="clear"
        wire:keydown.tab="clear"
        placeholder="enter search text here..."
        class="form-control form-control-sm search-box" 
    >
    @if(!empty($query))
        <div class="absolute shadow-sm rounded-sm mt-2" style="z-index: 1000 !important;">
            @if(!empty($models))
                @foreach ($models as $model)
                    <a href="#" class="list-group-item list-group-item-action py-1">{{$model['name']}}</a>
                @endforeach
            @else
                <div class="list-group-item py-1">No results</div>
            @endif
        </div>
    @endif
</div>

更新 1

• 附加了使用 livewire 组件的刀片文件代码段的屏幕截图。

• 结果

• CSS

  .search-results { z-index: 1000 !important; }